mobiscroll 的详细用法

mobiscroll是个很好用的jquery日期插件，它可以实现在移动端滚动选择日期。下面来介绍最常见的日期选择使用方式：

当然，你得首先引入css和js文件，我使用的是mobiscroll.custom-2.17.0.min.css和mobiscroll.custom-2.17.0.min.js,

html代码:

[html]  view plain  copy

1. <input id="demo" placeholder="Please Select..." />  
2.   
3. <button id="clear">Clear</button>  
4. <button id="show">Show</button>  

jquery代码:

[javascript]  view plain  copy

1. $(function () {  
2.   
3.     $('#demo').mobiscroll().date({  
4.         theme: 'mobiscroll',  
5.         display: 'bottom'  
6.     });  
7.   
8.     $('#show').click(function () {  
9.         $('#demo').mobiscroll('show');  
10.         return false;  
11.     });  
12.   
13.     $('#clear').click(function () {  
14.         $('#demo').mobiscroll('clear');  
15.         return false;  
16.     });  
17. });  

最后呈现的结果：

先来解释一下代码，date是mobiscroll已经定义好的方法，我们可以直接引用，那么它就会呈现日期，theme是指主题，mobiscroll有很多主题，可以根据你当前的手机系统是iOS或者是安卓来选择，也可以直接使用mobiscroll的样式，详情可以去官网查看。display是指弹出框的位置，分别可以使用top,bottom,inline来定义，这里解释一下inline的用法:inline的话就可以实现页面一加载就能看到这个弹出框，如果使用top和bottom,则必须使得输入框获得焦点才可以弹出。

有时候设计师给我们的设计图并不可以直接使用这个插件，而是要修改一些样式，如下图就是我在工作中UI设计师交付给我的工作稿，（作者当时想死的心都有，因为插件的样式并不是那么容易修改，最后还是被捣腾出来了！）

先来瞧瞧html代码，因为不需要输入框，所以我把输入框给隐藏了

[html]  view plain  copy

1. <input type="text" id="orderTime" style="display: none"/>  

jquery代码:

[javascript]  view plain  copy

1. var dates = [];  
2.        var getDays = function(str,day_count,format){  
3.            if(typeof str === "number"){  
4.                format = day_count;  
5.                day_count = str;  
6.                str = new Date();  
7.            }  
8.            var date = new Date(str);  
9.            for(var i=0;i<=day_count;i++){  
10.                var d = null;  
11.                " "  
12.                if(!format){  
13.                    var fmt = format;  
14.                    fmt = fmt.replace(/y{4}/,date.getFullYear());  
15.                    fmt = fmt.replace(/M{2}/,date.getMonth()+1);  
16.                    fmt = fmt.replace(/d{2}/,date.getDate());  
17.                    d = fmt;  
18.                }else{  
19.                    if(parseInt(date.getMonth()+1)<10){  
20.                        if(date.getDate()<10){  
21.                            d = "0"+ parseInt(date.getMonth()+1) + "月"+"0"+date.getDate()+"日";  
22.                        }else{  
23.                            d ="0"+ parseInt(date.getMonth()+1) + "月" +date.getDate()+"日";  
24.                        }  
25.                    }else{  
26.                        if(date.getDate()<10){  
27.                            d = parseInt(date.getMonth()+1) + "月"+"0"+date.getDate()+"日";  
28.                        }else{  
29.                            d = parseInt(date.getMonth()+1) + "月" +date.getDate()+"日";  
30.                        }  
31.                    }  
32.   
33.   
34.                }  
35.                dates.push(d);  
36.                date.setDate(date.getDate()+1);  
37.            }  
38.            return dates;  
39.   
40.        };  
41.   
42.   
43.        var hour=[];  
44.        for(var i=0;i<24;i++){  
45.            var c=i<10?"0"+i+":00":i+":00";  
46.            hour.push(c);  
47.        }  
48.   
49.        var wheels=[  
50.            [  
51.                {values:getDays(30,"yyyy年MM月dd日"),label:"服务日期"}  
52.   
53.            ],  
54.            [  
55.                {values:hour,label:"服务时间"}  
56.            ]  
57.        ];  
58.   
59.        var j=wheels[0][0].values[1];  
60.        var k=wheels[1][0].values[1];  
61.   
62.   
63.        $('#orderTime').mobiscroll().scroller({  
64.            theme:'mobiscroll',  
65.            display:'inline',  
66.            lang:'zh',  
67.            showLabel:true,  
68.            rows:3,  
69.            wheels:wheels,  
70.            defaultValue:[j,k],  
71.            formatResult:function(array){  
72.                console.log(array);  
73.                var choseDate=array[0];  
74.                var choseTime=array[1];  
75.                sessionStorage.setItem("choseDate",choseDate);  
76.                sessionStorage.setItem("choseTime",choseTime);  
77.   
78.            }  
79.   
80.   
81.   
82.   
83.        });  

前面getDays()方法是为了获取一个月日期的，针对这个日期我用了scroller方法，定义两个数组，wheels分别装两个数组的值,label是指当前数组的标题，可视设计图来写，如果没有可以不定义label。

再来解释一下scroller的参数，

theme：主题，

display:呈现方式，值有top,bottom,inline，

lang:语言，

showLabel:true/false,

rows:显示多少行，定义3就显示3行,

wheels:当前你定义的数组(即要滚动的数组),

defaultValue:默认显示当前滚动到哪个值,

formatResult:滚动到某个值后执行某个方法

先贴出我写的样式:

[css]  view plain  copy

1. /**********重构mobiscroll的样式************************/  
2. .mbsc-mobiscroll .dwwr {  
3.   background-color: transparent;  
4. }  
5. .dwsc .dw-sel {  
6.   background: url(../img/date.png) no-repeat left center;  
7.   width: 40px;  
8.   height: 40px;  
9.   background-size: 50% 50%;  
10.   padding-left: 20px;  
11. }  
12. .dwsc:last-child .dw-sel {  
13.   background-image: url(../img/time.png);  
14. }  
15. .dw-bf {  
16.   position: relative;  
17. }  
18. .mbsc-w-p {  
19.   width: 150px;  
20. }  
21. .dw-i {  
22.   width: 80px;  
23.   color: #baecff;  
24.   font-size: 0.3rem;  
25. }  
26. .dw-li {  
27.   padding-left: 20px;  
28. }  
29. .mbsc-mobiscroll .dwwol {  
30.   border-color: #b7ebfe;  
31.   width: 80px;  
32.   margin-left: 23px;  
33. }  
34. .dw-sel .dw-i,  
35. .mbsc-mobiscroll .dwl {  
36.   color: #fff;  
37.   font-size: 0.3rem;  
38. }  
39. .mbsc-mobiscroll .dwl {  
40.   font-size: 0.22rem;  
41.   width: 1.6rem;  
42.   margin-left: 0.4rem;  
43. }  

下面来介绍一下css的样式自定义：

.mbsc-mobiscroll .dwwol------------整一行，可以修改选中时上下两条线的颜色，.dw-i是在.dwwol里面的，只当前选中的值，

.dwsc .dw-sel-----当前选中的一行，可以修改滚动到某个值时的样式，

.dw-i----------每一行的值，无论选中还是不选中

好了，先这样简单介绍一下这个很好用的日期插件，除了日期功能，它还有很多很好用的功能，可以看看他的官网https://mobiscroll.com/。

额外奖励：

由于这个插件是要付费的，作者找了好久才找到破解版的17版本，网上有很多低版本的，是免费的，但有很多功能不支持，如果有需要的可以下载！

mobiscroll-custom-2.17.0下载