<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>cfvf</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobiscroll.custom-2.6.2.min.css"/>
<script src="js/mobiscroll.custom-2.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="dev/js/mobiscroll.core-2.6.2-zh.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
}
button {
display: inline-block;
text-decoration: none;
padding: 0.8em 2.6em;
margin: 20px 10px 0 0;
outline: 0;
border: 0;
overflow: visible;
cursor: pointer;
color: #fff;
background: #5185a8;
font-family: Arial, sans-serif, verdana;
font-size: 14px;
font-weight: 100;
-webkit-transition: background 0.3s ease-out;
-moz-transition: background 0.3s ease-out;
-o-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
}
button:hover {
background: #34566d;
}
input {
width: 100%;
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0;
background: #fff;
font-family: Arial, sans-serif,verdana;
text-shadow: none;
color: #000;
font-size: 15px;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.demo-iframe {
padding: 10px 10px 10px 10px;
text-shadow: none;
}
</style>
<script type="text/javascript">
$(function () {
var currYear = new Date().getFullYear();
$('#demo').mobiscroll().date({
// theme: 'android dw-modal dw-webkit',
theme: 'android-ics light dw-modal dw-webkit',
lang: 'zh',
display: 'modal',
dateFormat: 'yyyy-mm-dd', // 日期格式
dateOrder: 'yymmdd', //面板中日期排列格式
defaultValue: new Date(new Date().setFullYear(currYear - 20)),
maxDate: new Date(),
minDate: new Date(new Date().setFullYear(currYear - 120)),
//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; },
});
/*
preset: 'date', //日期
theme: 'jqm', //皮肤样式
display: 'modal', //显示方式
mode: 'clickpick', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
endYear:2020 //结束年份
* */
//{
//preset: 'date', //日期类型--data,时间类型--time,日期时间混合类型--datetime
//theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
//【wp light】【wp】
//mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
//display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
//dateFormat: 'yyyy-mm-dd', // 日期格式
//setText: '确定', //确认按钮名称
//cancelText: '清空',//取消按钮名籍我
//dateOrder: 'yymmdd', //面板中日期排列格
//dayText: '日',
//monthText: '月',
//yearText: '年', //面板中年月日文字
//startYear: (new Date()).getFullYear(), //开始年份
//endYear: (new Date()).getFullYear() + 9, //结束年份
//showNow: true,
//nowText: "明天", //
//showOnFocus: false,
//height: 45,
//width: 90,
//rows: 3
// onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; },不要日
// http://www.wglong.com/index/demos/mobiscroll/sample_zh.html 查看demo
// }
$('#show').click(function(){
$('#demo').mobiscroll('show');
return false;
});
$('#clear').click(function () {
$('#demo').mobiscroll('clear');
return false;
});
});
</script>
</head>
<body class="demo-comp-datetime demo-display-modal demo-theme-mobiscroll">
<div class="demo-iframe demo-dateofbirth">
<!-- Date & Time demo markup -->
<input id="demo" placeholder="请选择出生年月" />
<button id="clear">Clear</button>
<button id="show">Show</button>
</div>
</body>
</html
