您的位置:首页 > Web前端 > JQuery

Mobiscroll — 配合jQuery Mobile 的日期选择控件附DEMO

2014-07-09 17:15 381 查看
官方demo:http://demo.mobiscroll.com/
<script type="text/javascript" src="../../mweb_js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="../../mweb_js/datepicker/mobiscroll.core-2.5.2.js"></script>
<script type="text/javascript" src="../../mweb_js/datepicker/mobiscroll.core-2.5.2-zh.js"></script>
<link type="text/css" rel="stylesheet" href="../../mweb_css/datepicker/mobiscroll.core-2.5.2.css"/>
<link type="text/css" rel="stylesheet" href="../../mweb_css/datepicker/mobiscroll.animation-2.5.2.css"/>
<script type="text/javascript" src="../../mweb_js/datepicker/mobiscroll.datetime-2.5.1.js"></script>
<script type="text/javascript" src="../../mweb_js/datepicker/mobiscroll.datetime-2.5.1-zh.js"></script>
<!-- 可根据自己喜好引入样式风格文件 -->
<link type="text/css" rel="stylesheet" href="../../mweb_css/datepicker/mobiscroll.android-ics-2.5.2.css"/>
<script type="text/javascript" src="../../mweb_js/datepicker/mobiscroll.android-ics-2.5.2.js"></script>
<script type="text/javascript">
$(function () {
var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : 'date'};
//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
opt.datetime = {preset : 'datetime'};
opt.time = {preset : 'time'};
opt.default = {
theme: 'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yyyy-mm-dd', // 日期格式
lang:'zh',
startYear:currYear - 100, //开始年份
endYear:currYear, //结束年份
onSelect:function(){
setEndDate();//点击确认后函数
}
};
$("#effe_date").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
var optDateTime = $.extend(opt['datetime'], opt['default']);
var optTime = $.extend(opt['time'], opt['default']);
});
</script>




插件下载 

插件下载-破解附demo
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: