laydate时间控件：开始时间，结束时间最大最小值

桃扇骨 2022-11-21 09:47 373阅读 0赞

时间控件地址及插件下载链接：[https://www.layui.com/doc/modules/laydate.html][https_www.layui.com_doc_modules_laydate.html]

填充时间已两个功能为例；

1.添加功能 ：时间

规则：选择开始时间后，点击结束时间必须大于开始时间；

如果先选择结束时间，开始时间必须小于结束时间；

![技术图片][086043f4eaca412b1f1b85e5339bfda0.png]

代码如下：

<html>
    <body>
    <input type="text" class="cousre-time" id="startTime" placeholder="开始时间"
                                name="startTime" />
                            <span>-</span>
                            <input type="text" class="cousre-time" id="endTime" placeholder="结束时间"
                                name="endTime" />
    </body>
    <script>
        layui.use(‘laydate‘, function() {
                    var laydate = layui.laydate;
    
                    //开始时间
                    var start = laydate.render({
                        elem : ‘#startTime‘,
                        type : ‘datetime‘, //可选择：年月日时分秒
                        theme : ‘molv‘,
                        trigger : ‘click‘, //采用click弹出
                        done : function(value, date, endDate) {
                            end.config.min = {
                                year : date.year,
                                month : date.month - 1,
                                date : date.date,
                                hours : date.hours,
                                minutes : date.minutes,
                                seconds : date.seconds
                            }; //开始日选好后，重置结束日的最小日期
                            end.config.value = {
                                year : date.year,
                                month : date.month - 1,
                                date : date.date,
                                hours : date.hours,
                                minutes : date.minutes,
                                seconds : date.seconds
                            }; //将结束日的初始值设定为开始日
                        }
                    });
                    //结束时间
                    var end = laydate.render({
                        elem : ‘#endTime‘,
                        type : ‘datetime‘, //可选择：年月日时分秒
                        theme : ‘molv‘,
                        trigger : ‘click‘, //采用click弹出
                        done : function(value, date, endDate) {
                            start.config.max = {
                                year : date.year,
                                month : date.month - 1,
                                date : date.date,
                                hours : date.hours,
                                minutes : date.minutes,
                                seconds : date.seconds
                            }; //结束日选好后，重置开始日的最大日期
                        }
                    });
                });
    </script>
    </html>

2.编辑功能：时间

规则 ：默认有个初始值；

选择开始时间后，点击结束时间必须大于开始时间；

如果先选择结束时间，开始时间必须小于结束时间；

![技术图片][66bd3e8060dfb1624227e728f1ec6ac1.png]

代码如下：

[https_www.layui.com_doc_modules_laydate.html]: https://www.layui.com/doc/modules/laydate.html
[086043f4eaca412b1f1b85e5339bfda0.png]: /images/20221120/0aabd4374c594327a48a293954bf27db.png
[66bd3e8060dfb1624227e728f1ec6ac1.png]: /images/20221120/a1c0c61f70d441a3bf1f2d69aa8e6a9c.png