laydate中設置動態改變max與min值的方法

對於laydate 的開發，由於特殊要求，不能使用時間範圍選擇框，需要用兩個input來選擇時間，於是就出現了動態更改兩個時間選項的最大值、最小值的問題。

(轉載於其他優秀博客，感謝~ )

 

html：

<div class="form-group group">
	<label class="col-sm-4 control-label required-field symbol">開始時間</label>
	<div class="col-sm-8">
		<span class="input-with-icon right-icon-input">
			<input type="text" class="form-control" id="startTime" name="startTimeStr" placeholder="請選擇開始時間" readonly />
			<i class="fa fa-calendar"></i>
		</span>
	</div>
</div>

<div class="form-group group">
	<label class="col-sm-4 control-label required-field symbol">結束時間</label>
	<div class="col-sm-8">
		<span class="input-with-icon right-icon-input">
			<input type="text" class="form-control" id="endTime" name="endTimeStr" placeholder="請選擇結束時間" readonly />
			<i class="fa fa-calendar"></i>
		</span>
	</div>
</div>

js：

var startRender = laydate.render({
    elem: '#startTime',
    type:'datetime',
    format:'yyyy-MM-dd HH:mm:ss',
    trigger: 'click',
    btns: ['clear', 'confirm'],
    done: function (value, date) {
        if (value == "") {
            date = {year: 1900, month: 0, date: 0, hours: 0, minutes: 0, seconds: 0};
        }
        endRender.config.min = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        };
    }
});
var endRender = laydate.render({
    elem: '#endTime',
    type:'datetime',
    format:'yyyy-MM-dd HH:mm:ss',
    trigger: 'click',
    btns: ['clear', 'confirm'],
    done: function (value, date) {
        if (value == "") {
            date = {year: 2099, month: 12, date: 31, hours: 23, minutes: 59, seconds: 59};
        }
        startRender.config.max = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        };
    }
});

通過以上代碼就可以動態改變開始時間最大值和結束時間最小值。

坑一 ：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