移动端日期控件

  

  最近在写微信端的页面,要用到日期控件,得知其内置浏览器支持HTML5的时候,我笑了(so easy~),<input type="date" />两秒钟搞定。然后找了三种机型,你是不是猜到了已经?!没错,Android,iPhone,winphone,,,奇葩的winphone内置浏览器竟然是IE。醉了,疯狂搜索,找到一篇博客mobiscroll,照着敲下来都达不到人家的效果,搞了半天,终于,,,实现了哈哈。

  说到这,有人就要骂了,你傻逼啊,为啥不用jquery  mobile呢?呵呵,当你想选择25号的时候,你等到26号去选了(太卡,直接pass)

技术分享

  上边这俩也太丑了,官网有更好看的~

  下面开始跟人家做吧:

第一步:到官网去下载个压缩包,下载需要先注册然后才能下载。下载的时候你可以选择你使用的框架及皮肤样式等,看下图

技术分享

到此假设你已经成功注册并下载啦

第二步、新建一个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‘, // 日期格式
        setText: ‘确定‘, //确认按钮名称
        cancelText: ‘取消‘,//取消按钮名籍我
        dateOrder: ‘yymmdd‘, //面板中日期排列格式
        dayText: ‘日‘, monthText: ‘月‘, yearText: ‘年‘, //面板中年月日文字
        endYear:2020 //结束年份
    };
    
    $(‘input:jqmData(role="datebox")‘).mobiscroll(opt);
技术分享

这样就OK啦 看下效果图吧

技术分享

到这如果你跟我一样的智商,没写出来。。。就继续看下面的吧。。。(最烦那些不把所有代码贴出来的博客了)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 6         <title>mobiscroll-中文-日期选择</title>
 7         <link href="css/mobiscroll.frame.css" rel="stylesheet" type="text/css" />
 8         <link href="css/mobiscroll.frame.android-holo.css" rel="stylesheet" type="text/css" />
 9         <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
10         <link href="css/mobiscroll.android-holo-light.css" rel="stylesheet" type="text/css" />
11     </head>
12     <body>
13         <div style="text-align: center;">
14             <label for="date">mobiscroll-中文-日期选择</label><br />
15             <input type="text" id="date" />  
16         </div>
17         
18         <script src="js/zepto.min.js"></script>
19         <script src="js/mobiscroll.zepto.js"></script>
20         <script src="js/mobiscroll.core.js"></script>
21         <script src="js/mobiscroll.frame.js"></script>
22         <script src="js/mobiscroll.scroller.js"></script>
23         <script src="js/mobiscroll.util.datetime.js"></script>
24         <script src="js/mobiscroll.datetimebase.js"></script>
25         <script src="js/mobiscroll.datetime.js"></script>
26         <script src="js/mobiscroll.android-holo-light.js"></script>
27         <script src="js/i18n/mobiscroll.i18n.zh.js"></script>
28         <script type="text/javascript">
29             $(function(){
30                 $(#date).mobiscroll().date({
31                     theme: "android-holo-light",     
32                     mode: "scroller",       
33                     display: "bottom",
34                     lang: "zh"        
35                 });
36             });
37         </script>
38     </body>
39 </html>

卧槽这么多文件,你让我去哪下载啊,,别急别急。。。在这儿呢。。。

  =》

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。