对于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