[jquery移动触摸事件]jQuery移动触摸设备的日期选择插件 Mobiscroll使用示例

【www.bbyears.com--jquery】

HTML5中新增日期类型的输入控件，但日期选择界面在不同浏览器下的样子也各不相同。

1，Mobiscroll介绍

（1）Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件。
（2）控件时间类型可以是：日期，时间，或日期+时间。用户很方便的只需要滑动数字既可以选择日期。
（3）可以设置可选的时间范围，最小时间，最大时间，默认时间等。
（4）可以让用户自定义主题，完全通过CSS文件修改样式。
（5）完美使用在iOS4，Android 2.2, Android 2.3的浏览器，Safari浏览器，火狐，IE9等浏览器上面。

2，效果图如下：

3，使用样例：

 
 
 
     
     
    
      
     
    <script type="text/javascript" src="./jquery-1.11.1.min.js">  </script> 
    <script type="text/javascript" src="./js/mobiscroll.core-2.5.2.js"></script> 
    <script type="text/javascript" src="./js/mobiscroll.core-2.5.2-zh.js"></script> 
    <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.1.js"></script> 
    <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.1-zh.js"></script> 
    <script type="text/javascript"> 
        $(function () { 
            var currYear = (new Date()).getFullYear();   
            var opt={}; 
            opt.date = {preset : "date",minDate:new Date()}; //最小时间为今天
            opt.default = { 
                theme: "android-ics light", //皮肤样式 
                display: "modal", //显示方式  
                mode: "scroller", //日期选择模式 
                lang:"zh", 
                startYear:currYear - 20, //开始年份 
                endYear:currYear + 20 //结束年份 
            }; 
             
            //设置日期控件配置
            $("#appDateTime").val("").scroller("destroy")
                .scroller($.extend(opt["date"], opt["default"])); 
                     
            //设置初始化时间（当天）
            $("#appDateTime").scroller("setDate", new Date(), true);
        }); 
    </script> 
 

         

这个插件各位可以自发行到网上下载了，在这里只介绍使用方法不介绍插件下载哦。

本文来源：http://www.bbyears.com/wangyezhizuo/86425.html