移动端网页添加ios风格日历控件

         我们在进行手机端网页开发的时候,往往电脑上那些控件就不再适用了,不是很小看不清,就是风格不合适.

         下面就推荐一个适合手机端网页开发适用的js插件  ,制作ios风格的日历控件

mobiscroll.all.min.js 

设置ios风格的 日历控件

html 页面:

 <ul class="title-list">
            <li style="overflow:hidden;">
                <span style="margin-right:20px; float:left;">生 日</span>
                <div style="background:url(static/images/wechathelper/txl_script.png) no-repeat 0px -32px; background-size:18px; padding-left:20px; float:left;">
                    <input id="birthday" name="birthday"  placeholder="点击输入生日" class="txt formOptions premium" validata="required" type="text" value="" style="font-family:'微软雅黑';"/>
                </div>
            </li>
        </ul>

 

导入mobiscroll.all.min.js  及 birthday_component.js 插件(代码连接见文章最后.) 

mobiscroll.all.min.js 是基础 ,birthday_component.js 是使我们的html代码 和 mobiscroll.all.min.js 关联起来的js 代码 .

在birthday_component.js 中设置各种详细信息,再将id="birthday" 的input 组件 挂上 日历控件 :$("#birthday").mobiscroll(optDate).date(optDate);

mobiscroll.all.min.js的地址:http://download.csdn.net/detail/yubin2009m/9454657

birthday_component.js 的地址 :http://download.csdn.net/detail/yubin2009m/9454664