时间:2021-05-26
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等
文档和下载地址:
1、jQuery-Timepicker-Addon的下载地址:http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Addon_jb51.rar
2、jQuery-Timepicker-Addon的的文档地址:http://trentrichardson.com/examples/timepicker/
3、JQuery-UI下载地址:http://jqueryui.com/themeroller/
4、JQuery下载地址:
jquery(1.32-1.11.1-2.1.1) https:///jiaoben/58.html
jquery 3.0 https:///codes/35629.html
下面先看效果图:
引入js文件:
<script src="js/jquery-3.1.1.min.js"></script><script src="jquery-ui-1.12.1/jquery-ui.min.js"></script><link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" /><script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script><script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script><link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />1、默认的效果:
关键代码:
$("#defult").datetimepicker();2、控制到时分秒:
关键代码:
$('#date').prop("readonly", true).datetimepicker({ timeText: '时间', hourText: '小时', minuteText: '分钟', secondText: '秒', currentText: '现在', closeText: '完成', showSecond: true, //显示秒 timeFormat: 'HH:mm:ss' //格式化时间 });3、控制到年月日
关键代码:
$("#date_yy-mm-dd").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { } });4、开始结束区间
关键代码:
$("#date_start").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { $("#date_end").datepicker("option", "minDate", selectedDate); } }); $("#date_end").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { $("#date_start").datepicker("option", "maxDate", selectedDate); $("#date_end").val($(this).val()); } });5、时分秒选择:
关键代码:
$('#date_hhmmss').prop("readonly", true).timepicker({ timeText: '时间', hourText: '小时', minuteText: '分钟', secondText: '秒', currentText: '现在', closeText: '完成', showSecond: true, //显示秒 timeFormat: 'HH:mm:ss' //格式化时间 });6、开始结束区间(第二种写法):
关键代码:
$.timepicker.dateRange( $("#date_start_1"), $("#date_end_1"), { minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间 maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间 start: {}, // start picker options end: {} // end picker options}); } );完整代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="js/jquery-3.1.1.min.js"></script> <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script> <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" /> <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script> <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script> <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" /> <script type="text/javascript"> (function($) { $(function() { $.datepicker.regional['zh-CN'] = { changeMonth: true, changeYear: true, clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigText: '<<', prevBigStatus: '显示上一年', nextText: '下月>', nextStatus: '显示下月', nextBigText: '>>', nextBigStatus: '显示下一年', currentText: '今天', currentStatus: '显示本月', monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], monthStatus: '选择月份', yearStatus: '选择年份', weekHeader: '周', weekStatus: '年内周次', dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], dayStatus: '设置 DD 为一周起始', dateStatus: '选择 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '请选择日期', isRTL: false }; }); $(function() { $.datepicker.setDefaults($.datepicker.regional['zh-CN']); $("#defult").datetimepicker(); $('#date').prop("readonly", true).datetimepicker({ timeText: '时间', hourText: '小时', minuteText: '分钟', secondText: '秒', currentText: '现在', closeText: '完成', showSecond: true, //显示秒 timeFormat: 'HH:mm:ss' //格式化时间 }); $("#date_yy-mm-dd").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { } }); $("#date_start").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { $("#date_end").datepicker("option", "minDate", selectedDate); } }); $("#date_end").prop("readonly", true).datepicker({ changeMonth: true, dateFormat: "yy-mm-dd", onClose: function(selectedDate) { $("#date_start").datepicker("option", "maxDate", selectedDate); $("#date_end").val($(this).val()); } }); $('#date_hhmmss').prop("readonly", true).timepicker({ timeText: '时间', hourText: '小时', minuteText: '分钟', secondText: '秒', currentText: '现在', closeText: '完成', showSecond: true, //显示秒 timeFormat: 'HH:mm:ss' //格式化时间 }); $.timepicker.dateRange( $("#date_start_1"), $("#date_end_1"), { minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间 maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间 start: {}, // start picker options end: {} // end picker options}); } ); }); }(jQuery)); </script> </head> <body> 默认: <input id="defult" /> <br/> <br /> 控制到时分秒:<input id="date" /> <br /> <br /> 控制到年月日: <input id="date_yy-mm-dd" /> <br /> <br /> 开始结束区间: <br /> <input id="date_start" />~<input id="date_end" /> <br /> <br /> 时分秒选择: <br /> <input id="date_hhmmss" /> <br /> <br /> 开始结束区间(第二种写法): <br /> <input id="date_start_1" />~<input id="date_end_1" /> </body></html>代码的下载地址:http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
日期插件bootstrap-datetimepicker在火狐下出现一条报错信息:TypeError:(intermediatevalue).toString(
分享一款贴近Jquery日期、时间选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。效果图如下:在线预览源码下载Js代码var
项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟.有两种选择1.使用DateTimePicker日期时间选择器.2.DatePicke
jQueryDateRangePicker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的
asp之日期和时间函数示例可以使用日期和时间函数来得到各种格式的日期和时间函数语法说明示例NowNow()取得系统当前的日期和时间DimMyVarMyVar=N