Mobiscroll是一款手机的日期控件,相当于PC端的my97datepicker,虽然说my97datepicker在移动端也能使用,但是总感觉看起来不太好啦,废话不多说,开始看看Mobiscroll怎么使用吧

首先让大家看看Mobiscroll的界面是什么样的,是不是很像闹钟呀?这种效果是怎么做出来的呢?

先下载Mobiscroll,然后把其中的css和js文件导入,注意:图片要和css在同一个目录下,不然会找不到的当然,都说了是移动端的插件,肯定不要忘记导入jQueryMobile中的文件啦,具体要导入的文件如下,好啦,文件引入完全啦,空间代码:

<divdata-role="fieldcontain"><labelfor="txtBirthday">SelectDate:</label><inputtype="text"data-role="datebox"id="txtBirthday"name="txtBirthday"/></div>

还没完呢,还要初始化日期控件

<scripttype="text/javascript">$(document).ready(function(){$('input:jqmData(role="datebox")').mobiscroll().date();});</script>

当然,这个还不能满足我们中国人的使用,要是想习惯我们中国人的习惯,还是要加上一下代码

<scripttype="text/javascript">$(document).ready(function(){varopt={preset:'date',//日期display:'modal',//显示方式dateFormat:'yy-mm-dd',//日期格式setText:'确定',//确认按钮名称cancelText:'取消',//取消按钮名籍我dateOrder:'yymmdd',//面板中日期排列格式dayText:'日',monthText:'月',yearText:'年',//面板中年月日文字endYear:2020//结束年份};$('input:jqmData(role="datebox")').mobiscroll().date(opt);});</script>

这样的话就适合中国人使用啦,啊哈哈!