此插件的特点是可以适用于手机端滑动选择时间,类似于原生插件
引入css和js
<link rel="stylesheet" href="../js/date/mobiscroll.custom-2.6.2.min.css" /> <script type="text/javascript" src="../js/date/mobiscroll.custom-2.6.2.min.js" ></script>
html
<input type="text" id="calendarInput">
js
var opt={}; opt.date = {preset : 'date'}; opt.datetime = {preset : 'datetime'}; opt.time = {preset : 'time'}; opt.default = { preset: 'date', //日期 theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 dateFormat: 'yyyy-mm-dd', dateOrder : 'yyyymmdd', //面板中日期排列格式 lang: 'zh', showNow: true, nowText: "今天", startYear: currYear - 10, //开始年份 endYear: currYear + 10,//结束年份 onSelect:function(Value,inst){ //选中时触发事件 var t=Value.replace(/-/g,"") $("#execDate").val(t); baseTime=Value $("#calendarInput").val(Value.split("-")[1]+"-"+Value.split("-")[2]); loadData(); }, }; $("#calendarInput").mobiscroll($.extend(opt['date'], opt['default']));