首先，引入mobiscroll.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta2.min.css">
<script src="../js/jquery.js"></script>
<script src="../js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
</head>
<body>
</body>
</html>
然后，创建一个input，写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/mobiscroll.custom-3.0.0-beta2.min.css">
<script src="../js/jquery.js"></script>
<script src="../js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
</head>
<body>
<input type="text" class="input-demo">
<script>
var currYear = (new Date()).getFullYear();
var opt = {};
opt.datetime = { preset: 'datetime' };
opt.default = {
theme: 'ios', //皮肤样式
display: 'bottom', //显示方式
mode: 'scroller', //日期选择模式
lang: 'zh',
startYear: currYear - 80, //开始年份
endYear: currYear + 10 //结束年份
};
var optDateTime = $.extend(opt['datetime'], opt['default']);
$(".input-demo").mobiscroll(optDateTime).datetime(optDateTime);
</script>
</body>
</html>
网友评论