前言
首先要下载好相关的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>