手机日期控件mobiscroll

Posted 2021-01-15 zouhong

    query Mobiscroll是一个用于触摸设备(android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。以及各种滑动插件可以让用户很方便的只需要滑动数字既可以选择日期。Mobiscroll作为一款jQuery日期插件可以让用户自定义主题，完全通过CSS文件修改样式最近开发html5+css3手机APP经常用到的，觉得非常好用，兼容性又好，用户体验又很棒，所以就整理出来分享给大家，还支持设置皮肤、显示方式、日期选择模式、日期格式、语言、是否现在显示、显示的文本内容、开始年份、结束年份。

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(‘红红火火恍恍惚惚‘);
});

 

 

 

 

 

官网网址：http://www.mobiscroll.com/

2、官网下载地址：https://code.google.com/archive/p/mobiscroll/downloads

3、百度云下载地址：http://pan.baidu.com/s/1dFICCjZ  提取密码：copz

4、百度云精简版下载：http://pan.baidu.com/s/1dERPKJn 提取密码：wc6o

5、多种滑动插件下载：https://demo.mobiscroll.com/#components