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>4：实际的效果图
4.1 日期选择效果图
4.2:时间选择效果图
4.3:日期时间选择效果图
还有就是样式什么的可以自己修改，颜色什么的都可以
