JQuery datetimepicker之起始时间、结束时间关联输入

最新推荐文章于 2021-06-14 12:24:00 发布

han_mj

最新推荐文章于 2021-06-14 12:24:00 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_41726230/article/details/106043154

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

首先要下载好相关的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");

完整代码如下：

$\color{red}{更新：下面的代码有一个地方错了，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>