layui時間控件選擇時間範圍

解決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="結束時間(修改時間)">
</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; //開始日選好後，重置結束日的最小日期
}
};

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; //結束日選好後，重置開始日的最大日期
}
};

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="結束時間(修改時間)">
</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;
}
});

根據開始時間 動態限制結束時間  知識點  
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); //得結束的日期時間對象，開啓範圍選擇（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;
        }
    });
});
經過以上代碼，就已經能夠實現動態改變開始時間最大值與結束時間最小值的改變了。下面來講一下容易遇到的坑：

坑一 ：laydate.render沒法重複渲染，當laydate.render對應一個elem已經渲染過一次以後，咱們是沒法經過再次渲染來修改其中的max值與min值的。

坑二 ：startDate.config.max與endDate.config.min是一個對象，不是一個字符串，在網上看到一我的不負責任的給了這麼一句話，endDate.config.min="2017-01-01"；說能夠設置，我竟然信了他的邪掉進坑裏半天。實際這裏獲得的是一個對象，不一樣於在咱們渲染時的min與max了，直接將字符串賦值必然沒有效果。

坑三：dates的格式雖然與endDate.config.min格式相同可是直接讓endDate.config.min=dates你會發現並非你想要的結果，是由於雖然dates中的數據是你選擇的日期，但是endDate.config.min中設置的month的值卻比你輸入的month的值大了一個月，所以假如你選的開始日期是11月13日，直接賦值給了endDate.config.min以後你會發現結束日期的最小日期變成了12月13日，所以咱們須要將dates中的月份值減一後再賦值給endDate.config.min
---------------------
做者：鍵盤俠007
來源：CSDN
原文：https://blog.csdn.net/qq_29072049/article/details/80165811
版權聲明：本文爲博主原創文章，轉載請附上博文連接！