解決layui時間控件清空之后無法正常使用的問題，以及時間范圍的選擇

共有兩種解決方式：

方式一(layui 1.x)：

html代碼：

<div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="start_time" class="layui-input" id="start_time" placeholder="開始時間(修改時間)"> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="end_time" class="layui-input" id="end_time" placeholder="結(jié)束時間(修改時間)"> </div> </div> js代碼： var start = { istime: true, format: 'YYYY-MM-DD hh:mm:ss', max: '2099-06-16 23:59:59', istoday: true, choose: function (datas) { end.min = datas; //開始日選好后，重置結(jié)束日的最小日期 } };  var end = { istime: true, format: 'YYYY-MM-DD hh:mm:ss', max: '2099-06-16 23:59:59', istoday: true, choose: function (datas) { start.max = datas; //結(jié)束日選好后，重置開始日的最大日期 } };  document.getElementById('start_time').onclick = function () { start.elem = this; laydate(start); }; document.getElementById('end_time').onclick = function () { end.elem = this; laydate(end); };

方式二(layui 2.x)：

html代碼

<div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="start_time" class="layui-input" id="start_time" placeholder="開始時間(修改時間)"> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <input type="text" name="end_time" class="layui-input" id="end_time" placeholder="結(jié)束時間(修改時間)"> </div> </div> js代碼 layui.use([ 'laydate'], function(){ var $ = layui.$; var laydate = layui.laydate; var nowTime = new Date().valueOf(); var max = null;  var start = laydate.render({ elem: '#start_time', type: 'datetime', max: nowTime, btns: ['clear', 'confirm'], done: function(value, date){ endMax = end.config.max; end.config.min = date; end.config.min.month = date.month -1; } }); var end = laydate.render({ elem: '#end_time', type: 'datetime', max: nowTime, 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; } });

根據(jù)開始時間 動態(tài)限制結(jié)束時間 知識點 type: 'datetime', 是帶時分秒的 date 是不帶時分秒的

layui.use('laydate', function(){    /* lay('.layui-input').each(function(){   laydate.render({     elem: this     ,trigger: 'click'     ,change: function(value, date, endDate){     console.log(value); //得到日期生成的值，如：2017-08-18     console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}     console.log(endDate); //得結(jié)束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。     }   }); });  */ var $ = layui.$;     var laydate = layui.laydate;    var nowTime = new Date().valueOf();     var max = null;        var start = laydate.render({         elem: '#start_time',         type: 'datetime',         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: '#end_time',         type: 'date',         done: function(value, date){         console.log(" ======  "+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;         }     }); });

通過以上代碼，就已經(jīng)可以實現(xiàn)動態(tài)改變開始時間最大值與結(jié)束時間最小值的改變了。下面來說一下容易遇到的坑：

坑一 ：laydate.render無法重復渲染，當laydate.render對應一個elem已經(jīng)渲染過一次之后，我們是無法通過再次渲染來修改其中的max值與min值的。

坑二 ：startDate.config.max與endDate.config.min是一個對象，不是一個字符串，endDate.config.min="2017-01-01"；實際這里得到的是一個對象，不同于在我們渲染時的min與max了，直接將字符串賦值必然沒有效果。

坑三：dates的格式雖然與endDate.config.min格式相同但是直接讓endDate.config.min=dates你會發(fā)現(xiàn)并不是你想要的結(jié)果，是因為雖然dates中的數(shù)據(jù)是你選擇的日期，可是endDate.config.min中設置的month的值卻比你輸入的month的值大了一個月，因此假如你選的開始日期是11月13日，直接賦值給了endDate.config.min之后你會發(fā)現(xiàn)結(jié)束日期的最小日期變成了12月13日，因此我們需要將dates中的月份值減一后再賦值給endDate.config.min。