laydate时间控件（开始日期、结束日期）

最新推荐文章于 2023-12-18 16:44:23 发布

猴子请来的水军。

最新推荐文章于 2023-12-18 16:44:23 发布

阅读量8.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： laydate 开始日期结束日期控件

本文链接：https://blog.csdn.net/github_39121448/article/details/84232363

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用layui的laydate组件实现两个日期输入框的联动功能，确保结束日期不会早于开始日期。通过JavaScript代码设置结束日期的最小值为开始日期的值，实现日期范围的有效限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方地址：https://www.layui.com/laydate/

两个input框，限制开始时间和结束时间

<input type="text" id='starttime' name='starttime' class="form-control input-date" />
<input type="text" id='endtime' name='endtime' class="form-control input-date"/>

控件限制可选择的结束日期的最早时间为开始日期的时间

var startTime = laydate.render({
    elem: '#starttime'
    ,type: 'datetime' //时间格式：yyyy/MM/dd HH:mm:ss
    ,done: function(value, date, endDate) {
        endTime.config.min = {
            year: date.year,
            month: date.month - 1,//重点！！！
            date: date.date,
            hours:date.hours, 
            minutes:date.minutes, 
            seconds:date.seconds
        }

        var stime = new Date(Date.parse(value.replace("-", "/")));            
        var etime = new Date(Date.parse($("#endtime").val().replace("-", "/")));   
        if(stime>etime){ //开始时间若大于结束时间，则把开始时间的日期回填到结束时间
            $("#endtime").val(value);
        }
    }
});
var endTime = laydate.render({
    elem: '#endtime'
    ,min: $("#starttime").val() //可选择的最小日期为开始日期
});