2013-07-02 30 views
0

像往常一样,我有两个日期选取器#from#to,现在我需要做的是确保在两者之间选择的日期范围始终在彼此的3个月内。所以基本上,在选择其中一个采集器时,我需要为另一个选择日期设置minDate/maxDate选项,但我不知道找到这些相对日期的最佳方法是什么。有什么建议么?如何限制jqueryui日期范围?

+0

[两个日期之间jQuery UI的日期选择范围(的可能重复http://stackoverflow.com/questions/13530800/jquery-ui-datepicker-range-between-two-dates ) –

回答

0

或者你可以不喜欢它这个:fiddle
我想这两种方法都是有效的。

的.js

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    onSelect: function(dateText,dateObj){    
     var dateObject = $(this).datepicker("getDate"); 
     dateObject.setMonth(dateObj.currentMonth+3); 
     $("#endDatePicker").datepicker("option", "maxDate",dateObject); 
    } 
}); 
$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
     onSelect: function(dateText,dateObj){ 
      var dateObject = $(this).datepicker("getDate"); 
      dateObject.setMonth(dateObj.currentMonth-3); 
      $("#startDatePicker").datepicker("option", "minDate",dateObject); 
    } 
}); 
0

我创建了一个jsfiddle天之间.The范围设置为3 days.you可以编辑根据乌拉圭回合的要求

$(document).ready(function() { 
$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    onSelect: function (date) { 
     if ($('#endDatePicker').val() == "") { 

      var selectedDate = new Date(date); 
      var secsPerDay = 86400000; 
      var endDate = new Date(selectedDate.getTime() + 2 * secsPerDay); 
      alert(endDate); 
      $("#endDatePicker").datepicker("option", "minDate", selectedDate); 
      $("#endDatePicker").datepicker("option", "maxDate", endDate); 
     } 
    } 

}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    onSelect: function (date) { 
     if ($('#startDatePicker').val() == "") { 
      var selectedDate = new Date(date); 
      var secsPerDay = 86400000; 
      var startDate = new Date(selectedDate.getTime() - 5 * secsPerDay); 

      $("#startDatePicker").datepicker("option", "minDate", startDate); 
      $("#startDatePicker").datepicker("option", "maxDate", selectedDate); 
     } 
    } 

}); 
}); 

和HTML

<p>Start Date: 
<input type="text" id="startDatePicker"/> 
</p> 
<p>End Date: 
    <input type="text" id="endDatePicker"/> 
</p>