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

最新推荐文章于 2024-03-15 09:30:11 发布

码奴生来只知道前进~

最新推荐文章于 2024-03-15 09:30:11 发布

阅读量2.8k

点赞数 30

分类专栏： jQuery

本文链接：https://blog.csdn.net/tanqingfu1/article/details/105032111

版权

jQuery 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

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

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

码奴生来只知道前进~

关注

30
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
29
评论
jQuery 移动端触屏滑动日期控件(mobiscroll) 简单配置谁用谁知道 ^_^

1:插件生成的来源在很多页面和web应用中都有输入日期和时间的地方，我们知道HTML5提供一个input的date属性，对的就是时间选择。但是原始时间选择是不太好看的。所以就有了找到相关的插件封装。2：HTML5原始官方的date说明Input Date 对象Input Date 对象是 HTML5 中的新对象。Input Date 对象表示 HTML <in...
复制链接

扫一扫