使用jQuery創建兩個日期選擇器日期範圍實例

Question

我有兩個日期範圍表單。每個表格有2個字段，分別是from和to。在JavaScript中，我創建了日期範圍datepicker的兩個實例，但由於某種原因，在第二個日期範圍表單中，它並不完全正確。

第一種形式完美。但是，當我在第二種形式的from框中選擇一個日期時，例如10月9日，它將在from框中顯示該日期。當我點擊第二種形式的to字段時，我可以選擇的最遠日期是10月9日，原因是什麼？

我在下面有一個JS小提琴，所以你可以看到發生了什麼。我搜索了四處，但我找不到任何兩個日期範圍表單的實例。我可以找到很多默認的日期選擇器，但他們當然不是日期範圍和寫入不同，而且他們通常遇到的問題是人們使用相同的ID，但是我的都是不同的，所以我不明白它。

JS小提琴 - http://jsfiddle.net/6jJ36/

Answer 1

工作演示http://jsfiddle.net/fxr5c/

罪魁禍首：在你的舊代碼var option = this.id == "invfrom" ? "minDate" : "maxDate",代碼行，你有ID錯即ivnfrom這倒行爲。

休息這將有助於你的事業:)

代碼

var dates = $("#from, #to").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 3, 
    dateFormat: 'dd/mm/yy', 
    onSelect: function (selectedDate) { 

     var option = this.id == "from" ? "minDate" : "maxDate", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat, 
      selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 
    } 
}); 
var invdates = $("#invfrom, #invto").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 3, 
    dateFormat: 'dd/mm/yy', 
    onSelect: function (selectedDate) { 

     var option = this.id == "invfrom" ? "minDate" : "maxDate", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat, 
      selectedDate, instance.settings); 
     invdates.not(this).datepicker("option", option, date); 
    } 
});