jQuery - 移动触摸设备的日期选择插件 Mobiscroll

2015-10-16 发布：hangge 阅读：2524

HTML5中新增日期类型的输入控件<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，效果图如下：

3，使用样例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>hangge.com</title>  
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="./css/mobiscroll.core-2.5.2.css" />   
    <link rel="stylesheet" type="text/css" href="./css/mobiscroll.animation-2.5.2.css" />  
    <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>  
</head>  
<body>
     <input id="appDateTime" name="in_date"  />     
</body>
</html>

4，源码下载：

mobiscroll.zip