jqueryUI日期控件和时间控件

日期控件用法：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>日期</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="datepicker" style="width: 150px;height: 30px;text-align: center;">
<script>$("#datepicker").datepicker({changeMonth: true,changeYear: true,clearText: '清除',clearStatus: '清除已选日期',closeText: '关闭',closeStatus: '不改变当前选择',prevText: '<上月',prevStatus: '显示上月',prevBigText: '<<',prevBigStatus: '显示上一年',nextText: '下月>',nextStatus: '显示下月',nextBigText: '>>',nextBigStatus: '显示下一年',currentText: '今天',currentStatus: '显示本月',monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],monthStatus: '选择月份',yearStatus: '选择年份',weekHeader: '周',weekStatus: '年内周次',dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],dayStatus: '设置 DD 为一周起始',dateStatus: '选择 m月 d日, DD',dateFormat: 'yy-mm-dd',firstDay: 1,initStatus: '请选择日期',isRTL: false,onSelect: function (selectedDate) {console.log(selectedDate);}});
</script>
</body>

效果展示：

日期控件和时间控件一起使用：

<!DOCTYPE html>
<head><meta charset="utf-8"><title>日期和时间</title><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/jquery-ui-timepicker-addon.min.js"></script><style>/*以下日期控件和时间控件一起使用时，需要用到的css样式*/.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }.ui-timepicker-div dl { text-align: left; }.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }.ui-timepicker-div td { font-size: 90%; }.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }.ui-timepicker-rtl{ direction: rtl; }.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }.ui-timepicker-rtl dl dt{ float: right; clear: right; }.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }/* Shortened version style */.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }.ui-timepicker-div.ui-timepicker-oneLine dl dd,.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }</style>
</head>
<body>
<input type="text" id="datepicker1" style="width: 150px;height: 30px;text-align: center;">
<script>$('#datepicker1').datetimepicker({changeMonth: true,changeYear: true,clearText: '清除',clearStatus: '清除已选日期',closeText: '关闭',closeStatus: '不改变当前选择',prevText: '<上月',prevStatus: '显示上月',prevBigText: '<<',prevBigStatus: '显示上一年',nextText: '下月>',nextStatus: '显示下月',nextBigText: '>>',nextBigStatus: '显示下一年',currentText: '今天',currentStatus: '显示本月',monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],monthStatus: '选择月份',yearStatus: '选择年份',weekHeader: '周',weekStatus: '年内周次',dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],dayStatus: '设置 DD 为一周起始',dateStatus: '选择 m月 d日, DD',dateFormat: 'yy-mm-dd',firstDay: 1,initStatus: '请选择日期',isRTL: false,timeText: '时间',hourText: '小时',minuteText: '分钟',onSelect: function (selectedDateTime) {console.log(selectedDateTime);}});
</script>
</body>

效果展示：

参考：
https://stackoverflow.com/questions/60716841/set-date-and-time-in-jquery-datetimepicker-based-on-another-datetimepicker
https://trentrichardson.com/examples/timepicker/
https://www.cnblogs.com/gccbuaa/p/6921596.html
完整示例下载：
链接：https://pan.baidu.com/s/1iq_F8onl_Hk4ztwWs5ZKrA
提取码：lian

jqueryUI日期控件和时间控件相关推荐

layui 日期范围选择器_layui时间控件选择时间范围的实现方法
解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择共有两种解决方式: 方式一(layui 1.x): html代码: placeholder="开始时间(修改时间)&qu ...
时间控件_Selenium时间控件的处理
我们经常在做web自动化测试过程中会遇到时间控件,那么对于时间控件如何处理,我们可以来分析下. 对于时间控件一般分为两种: 1.普通的时间控件直接通过send_keys就可以解决 d.get(&qu ...
jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
轻量级的日期时间控件Pikaday
今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...
VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）...
VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...
VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）
VB6.0中,DTPicker日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值(解决方案) 参考文章: (1)VB6.0中,DTPicker日期.时间控件不允许为空时,采用文本框与日 ...
laydate时间控件（开始日期、结束日期）
官方地址:https://www.layui.com/laydate/ 两个input框,限制开始时间和结束时间 <input type="text" id='startti ...
HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...

jqueryUI日期控件和时间控件

jqueryUI日期控件和时间控件相关推荐

最新文章

热门文章