datepicker插件开始日期和结束日期选取限制
背景说明
在处理日期时,开始日期和结束日期常常伴随在一起出现,那么就涉及到日期的范围验证问题:开始日期不能大于结束日期,或者结束日期不能小于开始日期。
如下图是我的目标效果,当开始日期选择了2016年7月13日,结束日期就不能再选择13日之前的日期。
解决方案
我这里使用的是bootstrap-datepicker.js插件,思路就是在点击展开日器选择器时,设置一次可选择范围。例如,打开开始日期选择时,设置开始日期的最大可选值为结束日期的值;打开结束日期选择时,设置结束日期的最大可选值为开始日期的值。
代码如下:
<div class="input-group date"> <input name="startDate" id="startDateKey" placeholder="开始日期" type="text" class="form-control" /> <span class="input-group-addon">至</span> <input name="endDate" id="endDateKey" placeholder="结束日期" type="text" class="form-control" /> </div>
$("input[name='startDate']").datepicker({ todayBtn : "linked", keyboardNavigation : false, forceParse : false, calendarWeeks : true, autoclose : true }).on("click",function(ev){ $("#startDateKey").datepicker("setEndDate", $("#endDateKey").val()); }); $("input[name='endDate']").datepicker({ todayBtn : "linked", keyboardNavigation : false, forceParse : false, calendarWeeks : true, autoclose : true }).on("click",function(ev){ $("#endDateKey").datepicker("setStartDate", $("#startDateKey").val()); });