1:首先引用js文件:
<!--时间控件样式-->
<link rel="stylesheet" type="text/css" href="~/Theme/css/mobiscroll.custom-2.13.2.min.css">
<!--时间控件mobiscroll-->
<script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="~/Theme/plugins/mobiscroll/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
<link href="~/Theme/plugins/mobiscroll/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<link href="~/Theme/plugins/mobiscroll/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="~/Theme/plugins/mobiscroll/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
//选择时间
function selectDatetime() {
var currYear = (new Date()).getFullYear();
var opt = {};
opt.date = { preset: 'date' };
opt.datetime = { preset: 'datetime' };
opt.time = { preset: 'time' };
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
lang: 'zh',
startYear: currYear - 10, //开始年份
endYear: currYear + 10 //结束年份
};
//$("#ApptDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
var optDateTime = $.extend(opt['datetime'], opt['default']);
//var optTime = $.extend(opt['time'], opt['default']);
$("#ApptDate").mobiscroll(optDateTime).datetime(optDateTime);
//$("#ApptDate").mobiscroll(optTime).time(optTime);
}
2:前台html代码:
<input type="text" id="ApptDate" />
效果图:
android和iphone显示的是不一样的效果
css和js地址:百度盘点击下载
大家觉得好就给一个回复吧!谢谢!