夏日博客

A-A+

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

2016年01月13日 前端设计 暂无评论 阅读 8 views 次

日期选择插件在jquery中随便找都可以找出许多的这类插件出来了，今天我们介绍的是移动端的一个日期选择插件Mobiscroll的使用方法，具体的细节如下所示。

HTML5中新增日期类型的输入控件:

  1. <input type="date">  

但日期选择界面在不同浏览器下的样子也各不相同。

这里介绍一个专门用于移动设备的日期选择控件：Mobiscroll。（如果愿意，用在桌面Web项目中也可以）

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，使用样例:

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>hangge.com</title>   
  6.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
  7.     <link rel="stylesheet" type="text/css" href="./css/mobiscroll.core-2.5.2.css" />    
  8.     <link rel="stylesheet" type="text/css" href="./css/mobiscroll.animation-2.5.2.css" />   
  9.     <script type="text/javascript" src="./jquery-1.11.1.min.js">  </script>   
  10.     <script type="text/javascript" src="./js/mobiscroll.core-2.5.2.js"></script>   
  11.     <script type="text/javascript" src="./js/mobiscroll.core-2.5.2-zh.js"></script>   
  12.     <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.1.js"></script>   
  13.     <script type="text/javascript" src="./js/mobiscroll.datetime-2.5.1-zh.js"></script>   
  14.     <script type="text/javascript">   
  15.         $(function () {   
  16.             var currYear = (new Date()).getFullYear();     
  17.             var opt={};   
  18.             opt.date = {preset : 'date',minDate:new Date()}; //最小时间为今天  
  19.             opt.default = {   
  20.                 theme: 'android-ics light', //皮肤样式   
  21.                 display: 'modal', //显示方式    
  22.                 mode: 'scroller', //日期选择模式   
  23.                 lang:'zh',   
  24.                 startYear:currYear - 20, //开始年份   
  25.                 endYear:currYear + 20 //结束年份   
  26.             };   
  27.                
  28.             //设置日期控件配置  
  29.             $("#appDateTime").val('').scroller('destroy')  
  30.                 .scroller($.extend(opt['date'], opt['default']));   
  31.                        
  32.             //设置初始化时间（当天）  
  33.             $("#appDateTime").scroller('setDate', new Date(), true);  
  34.         });   
  35.     </script>   
  36. </head>   
  37. <body>  
  38.      <input id="appDateTime" name="in_date"  />      
  39. </body>  
  40. </html>  

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

标签：

给我留言