在很多页面和web应用中都有输入日期和时间的地方，我们知道HTML5提供一个input的date属性，对的就是时间选择。但是原始 时间选择是不太好看的。所以就有了找到相关的插件封装。
Input Date 对象
Input Date 对象是 HTML5 中的新对象。
Input Date 对象表示 HTML <input type="datetime"> 元素。
注释：Internet Explorer 或 Firefox 不支持 <input type="date"> 元素。
您可以通过使用 getElementById() 来访问 <input type="date"> 元素：
var x = ElementById("myDate");
提示：您也可以通过遍历表单的 elements 集合来访问 Input Date 对象。
您可以通过使用 ateElement() 方法来创建 <input type="date"> 元素：
var x = ateElement("INPUT");
x.setAttribute("type", "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 属性值。 |
<!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.1 日期选择效果图
4.2:时间选择效果图
4.3:日期时间选择效果图
还有就是样式什么的可以自己修改，颜色什么的都可以
本文发布于:2024-01-31 02:47:25，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170664044624788.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
