jQuery 移动端触屏滑动日期控件(mobiscroll) 简单配置谁用谁知道 ^_^

1:插件生成的来源

在很多页面和web应用中都有输入日期和时间的地方，我们知道HTML5提供一个input的date属性，对的就是时间选择。但是原始时间选择是不太好看的。所以就有了找到相关的插件封装。

2：HTML5原始官方的date说明

Input Date 对象

Input Date 对象是 HTML5 中的新对象。

Input Date 对象表示 HTML <input type="datetime"> 元素。

注释：Internet Explorer 或 Firefox 不支持 <input type="date"> 元素。

访问 Input Date 对象

您可以通过使用 getElementById() 来访问 <input type="date"> 元素：

var x = document.getElementById("myDate");

提示：您也可以通过遍历表单的 elements 集合来访问 Input Date 对象。

创建 Input Date 对象

您可以通过使用 document.createElement() 方法来创建 <input type="date"> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "date");

Input Date 对象属性

属性	描述
autocomplete	设置或返回 date 字段的 autocomplete 属性值。
autofocus	设置或返回 date 字段在页面加载后是否应自动获取焦点。
defaultValue	设置或返回 date 字段的默认值。
disabled	设置或返回 date 字段是否被禁用。
form	返回对包含 date 字段的表单的引用。
list	返回对包含 date 字段的 datalist 的引用。
max	设置或返回 date 字段的 max 属性值。
min	设置或返回 date 字段的 min 属性值。
name	设置或返回 date 字段的 name 属性值。
readOnly	设置或返回 date 字段是否是只读的。
required	设置或返回在提交表单之前是否必须填写 date 字段。
step	设置或返回 date 字段的 step 属性值。
type	返回 date 字段的表单元素类型。
value	设置或返回 date 字段的 value 属性值。

3： mobiscroll时间插件的实际代码&效果


<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>jQuery移动端触屏滑动日期控件</title>

    <script src="js/jquery-1.10.0.min.js"></script>
    <script src="js/mobiscroll_002.js" type="text/javascript"></script>
	<script src="js/mobiscroll_004.js" type="text/javascript"></script>
	<link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
	<link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
	<script src="js/mobiscroll.js" type="text/javascript"></script>
	<script src="js/mobiscroll_003.js" type="text/javascript"></script>
	<script src="js/mobiscroll_005.js" type="text/javascript"></script>
	<link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
        $(function(){
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 80 //结束年份
			};
            $("#EndDate").mobiscroll($.extend(opt['date'], opt['default']));//年月日型
            var optDateTime = $.extend(opt['datetime'], opt['default']);
	    var optTime = $.extend(opt['time'], opt['default']);
            $("#AbsentEndDate").mobiscroll(optDateTime).datetime(optDateTime);//年月日时分型
			$("#EndTime").mobiscroll(optTime).time(optTime);//时分型

         });
    </script>
</head>

<body>
    <div style="text-align:center;">
		<h2>时间控件</h2>
		<div>
			<label>日期:</label>
			<input id="EndDate" runat="server"  readonly="readonly" style="width:30%;" />
		</div> 
		<br />
		<div>
			<label>时间:</label>
			<input id="EndTime" runat="server"  readonly="readonly" style="width:30%;" />
		</div>
		<br />
		<div>
			<label>日期时间:</label>
			<input id="AbsentEndDate" runat="server"  readonly="readonly" style="width:28%"/>
		</div>

	</div>
</body>
</html>