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:日期时间选择效果图

还有就是样式什么的可以自己修改,颜色什么的都可以

posted @ 2022-08-04 19:13  码奴生来只知道前进~  阅读(343)  评论(1编辑  收藏  举报