實現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) { } }); } }); })