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