手机日期控件mobiscroll几点使用小技巧

最近项目开发需要用到日期控件，于是网上搜索到了mobiscroll，发现功能很强大，遂将使用方法总结一下。

1.以下是日期控件的基本初始化：

$('#beginDate').mobiscroll().date({
theme: 'default', 
lang: 'zh',
dateFormat : 'yy-mm-dd', 
display: 'bubble'
});

注：theme属性可以改变控件的风格；lang属性可以改变语言；dateFormat属性控制显示日期的格式，如例子中的格式显示为2016-10-29。

2.如果要控制日期控件在一段区间内，可以向下面这样定义：

$('#endDate').mobiscroll().date({
    theme: 'default', 
    lang: 'zh',
    dateFormat : 'yy-mm-dd', 
    display: 'bubble',
                 minDate:new Date('2016-10-01'),
  maxDate:new Date('2016-10-31')
    });

注：minDate属性控制日期控件的最小日期，也就是向上翻的尽头；maxDate属性控制日期控件的最大日期，也就是向下饭的尽头。需注意一点设置最大最小日期 时入参必须是Date类型，否则无法显示效果。

3.如果只想显示年月而不要日的样式可以这样做：

$('#endDate').mobiscroll().date({
    theme: 'default', 
    lang: 'zh',
    dateFormat : 'yy-mm-dd', 
     onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; },   
    display: 'bubble',
                 minDate:new Date(newDateStart),
  maxDate:new Date(newDateEnd)
    });

注：onBeforeShow属相控制在日期控件显示之前对控件的操作，例子中的功能就是在日期控件显示之前将日滚轮去掉（PS：这个功能是我在网上找到的，在这里向那位大触致敬  手动敬礼）。

4.如果想要监听日期控件可以这样做：

$("#beginDate").bind("change", function(e) {
alert('红红火火恍恍惚惚');
});

注：所谓监听就是在你选择完日期点击确定后触发的事件，如本例就是点击完确定后弹出alert提示。

最后一句：以上就是我对mobiscroll控件的一些拙见，各位大触轻喷，感激不尽！