datepicker插件开始日期和结束日期选取限制

背景说明

在处理日期时,开始日期和结束日期常常伴随在一起出现,那么就涉及到日期的范围验证问题:开始日期不能大于结束日期,或者结束日期不能小于开始日期。

如下图是我的目标效果,当开始日期选择了2016年7月13日,结束日期就不能再选择13日之前的日期。

20160714193639

解决方案

我这里使用的是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());  
});
分享到:

发表评论

昵称

沙发空缺中,还不快抢~