实现layui日期控件laydate对开始和结束时间的联动

1.页面先引入layui.js和jquery.js文件

2.html页面如下：

<div class="hour_type mg-top">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <div class="left-style">
                            <label style="color: red;">*</label>
                            <label>开始时间</label>
                        </div>
                        <div class="right-style">
                            <input placeholder="请选择" id="timeStart" />
                            <img src="../img/arrow-lower.png" />
                        </div>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="left-style">
                            <label style="color: red;">*</label>
                            <label class="laber-style">结束时间</label>
                        </div>
                        <div class="right-style" id="end">
                            <input placeholder="请选择" id="timeEnd" />
                            <img src="../img/arrow-lower.png" />
                        </div>
                    </li>
                </ul>
            </div>

 

3.js如下：

layui.use('laydate', function() { 

                var startDate = layui.laydate.render({
                    elem: '#timeStart',
                    done: function(value, date) {
                        var year = date.year;
                        var month = date.month - 1;//月份需要减一才是正确值
                        var day = date.date;
                        var finalDate = new Date(year, month, day);//获取开始时间的年月日
                        console.log(finalDate.valueOf());
                        $('#timeStart').click(function() {//每次改变日期就重新赋值
                            $('#timeEnd').remove();
                        })
                        $('#end').html('<input placeholder="请选择" id="timeEnd" /><img src="../img/arrow-lower.png" />')

                        var endDate = layui.laydate.render({
                            elem: '#timeEnd',
                            btns: ['clear', 'confirm'],
                            min: date.year + '-' + date.month + '-' + date.date,
                            max: finalDate.valueOf() + 24 * 60 * 60 * 1000 * 4,//使用时间戳格式
                            done: function(value, date) {

                            }
                        });

                    }
                });
            })