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());  
});