layUI时间选择开始时间控制结束时间选择

时间:2024-05-20 08:13:27

具体实现功能如下图,当开始时间选择后,结束时间不得小于开始时间

layUI时间选择开始时间控制结束时间选择

js代码

 var $ = layui.$;
            var laydate = layui.laydate;
            var nowTime = new Date().valueOf();
            var max = null;
            var start = laydate.render({
                elem: '#startTime',
                type: 'date',
                btns: ['clear', 'confirm'],
                done: function(value, date){
                    endMax = end.config.max;
                    end.config.min = date;
                    end.config.min.month = date.month -1;
                },
                change: function(value, date, endDate){
                var timestamp2 = Date.parse(new Date(value));
                timestamp2 = timestamp2 / 1000;
                    end.config.min = timestamp2;
                    end.config.min.month = date.month -1;
            }
            });
            var end = laydate.render({
                elem: '#endTime',
                type: 'date',
                done: function(value, date){
                    if($.trim(value) == ''){
                        var curDate = new Date();
                        date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
                    }
                    start.config.max = date;
                    start.config.max.month = date.month -1;
                }
            });

 

HTML代码:

<div class="form_input width50">
                <h1>开始时间:</h1>
                <input class="calendar_btn" lay-verify="required" type="text" name="startTime" id="startTime" autocomplete="off" placeholder="yyyy-MM-dd">
            </div>
            <div class="form_input width50">
                <h1>结束时间:</h1>
                <input class="calendar_btn" lay-verify="required" type="text" name="endTime" id="endTime" autocomplete="off" placeholder="yyyy-MM-dd">
            </div>