jQuery - 移动触摸设备的日期选择插件 Mobiscroll
作者：hangge | 2015-10-16 09:57
HTML5中新增日期类型的输入控件<input type="date">，但日期选择界面在不同浏览器下的样子也各不相同。
（2）控件时间类型可以是：日期，时间，或日期+时间。用户很方便的只需要滑动数字既可以选择日期。
（3）可以设置可选的时间范围，最小时间，最大时间，默认时间等。
（4）可以让用户自定义主题，完全通过CSS文件修改样式。
（5）完美使用在iOS4，Android 2.2, Android 2.3的浏览器，Safari浏览器，火狐，IE9等浏览器上面。
这里介绍一个专门用于移动设备的日期选择控件：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>
全部评论（0）