mobiscroll的具体用法

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

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

html代码:

<input id="demo" placeholder="Please Select..." />

<button id="clear">Clear</button>
<button id="show">Show</button>

jquery代码:

$(function () {

    $('#demo').mobiscroll().date({
        theme: 'mobiscroll',
        display: 'bottom'
    });

    $('#show').click(function () {
        $('#demo').mobiscroll('show');
        return false;
    });

    $('#clear').click(function () {
        $('#demo').mobiscroll('clear');
        return false;
    });
});

最后呈现的结果：

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

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

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

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

jquery代码:

 var dates = [];
        var getDays = function(str,day_count,format){
            if(typeof str === "number"){
                format = day_count;
                day_count = str;
                str = new Date();
            }
            var date = new Date(str);
            for(var i=0;i<=day_count;i++){
                var d = null;
                " "
                if(!format){
                    var fmt = format;
                    fmt = fmt.replace(/y{4}/,date.getFullYear());
                    fmt = fmt.replace(/M{2}/,date.getMonth()+1);
                    fmt = fmt.replace(/d{2}/,date.getDate());
                    d = fmt;
                }else{
                    if(parseInt(date.getMonth()+1)<10){
                        if(date.getDate()<10){
                            d = "0"+ parseInt(date.getMonth()+1) + "月"+"0"+date.getDate()+"日";
                        }else{
                            d ="0"+ parseInt(date.getMonth()+1) + "月" +date.getDate()+"日";
                        }
                    }else{
                        if(date.getDate()<10){
                            d = parseInt(date.getMonth()+1) + "月"+"0"+date.getDate()+"日";
                        }else{
                            d = parseInt(date.getMonth()+1) + "月" +date.getDate()+"日";
                        }
                    }


                }
                dates.push(d);
                date.setDate(date.getDate()+1);
            }
            return dates;

        };


        var hour=[];
        for(var i=0;i<24;i++){
            var c=i<10?"0"+i+":00":i+":00";
            hour.push(c);
        }

        var wheels=[
            [
                {values:getDays(30,"yyyy年MM月dd日"),label:"服务日期"}

            ],
            [
                {values:hour,label:"服务时间"}
            ]
        ];

        var j=wheels[0][0].values[1];
        var k=wheels[1][0].values[1];


        $('#orderTime').mobiscroll().scroller({
            theme:'mobiscroll',
            display:'inline',
            lang:'zh',
            showLabel:true,
            rows:3,
            wheels:wheels,
            defaultValue:[j,k],
            formatResult:function(array){
                console.log(array);
                var choseDate=array[0];
                var choseTime=array[1];
                sessionStorage.setItem("choseDate",choseDate);
                sessionStorage.setItem("choseTime",choseTime);

            }




        });

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

再来解释一下scroller的参数，

theme：主题，

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

lang:语言，

showLabel:true/false,

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

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

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

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

先贴出我写的样式:

/**********重构mobiscroll的样式************************/
.mbsc-mobiscroll .dwwr {
  background-color: transparent;
}
.dwsc .dw-sel {
  background: url(../img/date.png) no-repeat left center;
  width: 40px;
  height: 40px;
  background-size: 50% 50%;
  padding-left: 20px;
}
.dwsc:last-child .dw-sel {
  background-image: url(../img/time.png);
}
.dw-bf {
  position: relative;
}
.mbsc-w-p {
  width: 150px;
}
.dw-i {
  width: 80px;
  color: #baecff;
  font-size: 0.3rem;
}
.dw-li {
  padding-left: 20px;
}
.mbsc-mobiscroll .dwwol {
  border-color: #b7ebfe;
  width: 80px;
  margin-left: 23px;
}
.dw-sel .dw-i,
.mbsc-mobiscroll .dwl {
  color: #fff;
  font-size: 0.3rem;
}
.mbsc-mobiscroll .dwl {
  font-size: 0.22rem;
  width: 1.6rem;
  margin-left: 0.4rem;
}

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

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

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

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

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

额外奖励：

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

mobiscroll-custom-2.17.0下载