Mobiscroll，基于jQuery的手机端日期选择插件

        Mobiscroll是一款基于jQuery的拥有优秀UI的日期选择控件（当然，不仅仅局限于选择日期），使用起来非常方便，但是，官方是收费的，我爱模板网提供的是破解版的Mobiscroll。效果如下：


第一步：下载本插件，下载地址下面已经提供，打开index-jquery-2.6.2.html文件，您就可以看到效果，上面的一系列设置，可以实现不同的效果，点击最下面的输入框，即可弹出日期：



第二步、新建一个HTML5文件，引jquery.js,jquerymobile.js 等等必须的文件，编写如下代码到你的文件中：

<div data-role="fieldcontain">
         <label for="txtBirthday">出生日期：</label>
         <input type="text" data-role="datebox"   id="txtBirthday" name="birthday" />
</div>

第三步：初始化日期控件：

$('input:jqmData(role="datebox")').mobiscroll().date();

预览下吧，是不是可以使用了呢！唯独这个界面是英文的，对于国人来说多少有点不爽，而官网又没有提供中文语言包，但没有关系，官网的API还是不错的，我们可以设置一些常用的属性使之符合常规的日期格式。

//初始化日期控件
var opt = {
        preset: 'date', //日期
        theme: 'jqm', //皮肤样式
        display: 'modal', //显示方式
        mode: 'clickpick', //日期选择模式
        dateFormat: 'yy-mm-dd', // 日期格式 yyyymmdd就全显示
        setText: '确定', //确认按钮名称
        cancelText: '取消',//取消按钮名
        dateOrder: 'yymmdd', //面板中日期排列格式,yyyymmdd就全显示
        dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
        endYear:2020, //结束年份,
        minDate:new Date(2010,10,3),
        maxDate:new Date(2012,10,3)//设置可选择最大时间
    };

    //初始化插件
    $('input:jqmData(role="datebox")').mobiscroll(opt);

这样就OK啦 看下效果图吧