从网上找的，自己总结了一下。但是样式实在不好看。
百度云下载：链接：https://pan.baidu.com/s/1dGDrJn7 密码：oki9
官方地址 ：https://docs.mobiscroll.com/2-17-2
一些参数：http://makaidong.com/xiaoyaoxingchen/426453_15780550.html
<!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>Mobiscroll</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link href="css/mobiscroll.custom-3.0.0-beta6.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript"></script>
</head>
<body>
<div style="text-align:center">
<input type="text" placeholder="请选择" readonly id="dates" value="">
</div>
<br>
<div style="text-align:center">
<input type="text" placeholder="请选择" readonly id="dates2" value="">
</div>
<br>
<div style="text-align:center">
<input type="text" placeholder="请选择" readonly id="demo" value="">
</div>
</body>
<script type="text/javascript">
$(function () {
mobiscroll.settings = {
lang: 'zh'
};
$('#dates').mobiscroll().date({
theme: "material",
display: "center",
mode: "Datetime", //scroller
dateFormat: 'yy-mm-dd',
});
$('#dates').val("2018-3-3");
$('#dates2').mobiscroll().date({
theme: "material",
display: "center",
mode: "Datetime", //scroller
dateFormat: 'yyyy-mm-dd',
onBeforeShow: function (inst) { },
endYear: 2022,
startYear:1999,
headerText: function(valueText) {
var array = valueText.split('-');
return array[0] + "年" + array[1] + "月" + array[2] + "日";
},
cancelText: "取消111",
});
var now = new Date(),
until = new Date(now.getFullYear() + 10, now.getMonth());
$('#demo').mobiscroll().date({
theme: 'ios',
display: 'bottom',
dateWheels: 'yy mm - MM',
dateFormat: 'yy-mm',
min: now,
minWidth: 100,
max: until,
buttons: ['now', 'set', 'cancel']
});
// theme
// <option value="">Default / Auto</option>
// <option value="mobiscroll">Mobiscroll</option>
// <option value="android-holo">Android Holo</option>
// <option value="wp">Windows Phone</option>
// <option value="ios">iOS</option>
// <option value="bootstrap">Bootstrap</option>
// <option value="android-holo-light">Android Holo Light</option>
// <option value="wp-light">Windows Phone Light</option>
// <option value="mobiscroll-dark">Mobiscroll Dark</option>
// <option value="material">Material</option>
// <option value="material-dark">Material Dark</option>
// <option value="ios-dark">iOS Dark</option>
//
// display
// <option value="center">Center</option>
// <option value="inline">Inline</option>
// <option value="bubble">Bubble</option>
// <option value="top">Top</option>
// <option value="bottom">Bottom</option>
//
// <optgroup label="Datetime">
// <option value="datetimeDate" selected>Basic usage date</option>
// <option value="datetimeInvalid">Datetime with invalids</option>
// <option value="datetimeTime">Basic usage time</option>
// <option value="datetimeMinmax">Setting min and max values</option>
// </optgroup>
// <optgroup label="Select">
// <option value="selectBasic">Basic usage</option>
// <option value="selectGroupselect">Group options</option>
// <option value="selectMultiple">Multiple select</option>
// </optgroup>
});
</script>
</html>
评论：样式风格不符合国人审美。不推荐。下面是扩展版本，但是扩展版本的api没有。