2013-07-02 104 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>