JQuery datetimepicker之起始时间、结束时间关联输入
前言
首先要下载好相关的css文件和js文件，如果你还没有尝试过基于JQuery的时间选择器的话，请点击这里查看：基于JQuery的时间选择器（支持中文）
如果项目中需要输入两个时间，一个是起始时间，另一个是结束时间，那么这两个时间就必须有逻辑限制：起始时间不能大于结束时间、结束时间不能大于起始时间等。特殊的，在我的项目中，还有一个限制，就是起始时间和结束时间都不能大于当前时间。
这就需要用到datetimepicker的beforeShow和onClose参数，这两个是监听函数。
beforeShow的第一个参数表示输入框的html代码，第二个参数表示该输入框（起始时间）的时间选择器对象。
onClose的第一个参数表示输入框的值，第二个参数表示该输入框（起始时间）的时间选择器对象。
值得一提的，我在网上查到的打开时监听参数都是onshow，但是在我的项目中运行不起来，尝试了一下是beforeShow，有可能的版本的更新。
$("#start_time").datetimepicker({timeFormat: "HH:mm:ss",dateFormat: "yy-mm-dd",beforeShow: function(input_html, inst){// TODO},onClose: function(dateText, inst) {// TODO}});
还有，如果不在初始化的设置好最大时间和最小时间的限制，希望能够动态修改的话，需要用到这个方法：
$("#start_time").datetimepicker("option", "minDate", "2020-05-06");
完整代码如下：
更 新 ： 下 面 的 代 码 有 一 个 地 方 错 了 ， M a x T i m e 的 设 置 应 该 与 M a x D a t e 有 关 ， 而 不 是 单 独 设 立 ， 码 一 下 ， 下 次 有 空 改 \color{red}{更新：下面的代码有一个地方错了，MaxTime的设置应该与MaxDate有关，而不是单独设立，码一下，下次有空改} 更新：下面的代码有一个地方错了，MaxTime的设置应该与MaxDate有关，而不是单独设立，码一下，下次有空改
<html>
<head><link rel="stylesheet" href="./css/jquery-ui.css"><link rel="stylesheet" href="./css/jquery-ui-timepicker-addon.css"><title>index</title></head>
<body><input type="text" id="start_time" readonly/><input type="text" id="end_time" readonly/><script src="./js/jQuery-2.2.0.min.js"></script><script src="./js/jquery-ui.js"></script><script src="./js/jquery-ui-timepicker-addon.js"></script><script src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"></script><script src="js/jquery-ui-timepicker-zh-CN.js" type="text/javascript" charset="utf8"></script><script type="text/javascript">$(function(){$("#start_time").datetimepicker({timeFormat: "HH:mm:ss",dateFormat: "yy-mm-dd",beforeShow: function(input_html, inst){$(this).datetimepicker("option", "maxDate", new Date());$(this).datetimepicker("option", "maxTime", new Date());},onClose: function(dateText, inst) {var arr = dateText.split(" ");$("#end_time").datetimepicker("option", "minDate", arr[0]);$("#end_time").datetimepicker("option", "minTime", arr[1]);}});$("#end_time").datetimepicker({timeFormat: "HH:mm:ss",dateFormat: "yy-mm-dd",beforeShow: function(input_html, inst){$(this).datetimepicker("option", "maxDate", new Date());$(this).datetimepicker("option", "maxTime", new Date());},onClose: function(dateText, inst) {}});});</script>
</body></html>
参考文章：
jquery datetimepicker 配置参数
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！