多個jquery Datepickers與最小和最大範圍

Question

我想要處理多個Datepickers與開始和結束日期範圍。

HTML

<div id="date1"> 
    <input id="datePicker[0]_StartDate" data-index="0" class="datepickerStart" type="text" name="datePicker[0].StartDate"/> 
    <input id="datePicker[0]_EndDate" data-index="0" class="datepickerEnd" type="text" name="datePicker[0].EndDate"/> 
</div> 
<div id="date2"> 
    <input id="datePicker[1]_StartDate" data-index="1" class="datepickerStart" type="text" name="datePicker[1].StartDate"/> 
    <input id="datePicker[1]_EndDate" data-index="1" class="datepickerEnd" type="text" name="datePicker[1].EndDate"/> 
</div> 

jQuery的

$(".datepickerStart").datepicker({ 
    constrainInput: true, 
    changeMonth: true, 
    changeYear: true, 
    firstDay: 1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate, obj) { 
     var index = obj.input.data("index"); 
     $("#datePicker[" + index + "]_EndDate").datepicker("option", "minDate", selectedDate); 
    } 
}); 
$(".datepickerEnd").datepicker({ 
    constrainInput: true, 
    changeMonth: true, 
    changeYear: true, 
    firstDay: 1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate, obj) { 
     var index = obj.input.data("index"); 
     $("#datePicker[" + index + "]_StartDate").datepicker("option", "maxDate", selectedDate); 
    } 
}); 

我試圖設置 「索引0」 開始日期選擇器maximun範圍與 「索引0」 結束日期選擇器選擇日期 和還試圖設置索引0的 結束日期選擇器索引爲0的最小範圍開始日期選擇器選定日期

和「索引1」日期選擇器的相同過程。

請建議爲this.Thanks一些解決方案

Answer 1

你能嘗試用下面的代碼：

發現問題。另一個問題是你的元素的ID。它們包含方括號。所以要處理這樣的ID，我們需要通過\\來逃避它們。

小提琴鏈接：http://jsfiddle.net/vijayP/pqhtt7gb/

JS代碼：

$(".datepickerStart").datepicker({ 
    constrainInput: true, 
    changeMonth: true, 
    changeYear: true, 
    firstDay: 1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate, obj) { 
     var index = obj.input.data("index"); 
     $("#datePicker\\[" + index + "\\]_EndDate").datepicker("option", "minDate", new Date(selectedDate)); 
    } 
}); 
$(".datepickerEnd").datepicker({ 
    constrainInput: true, 
    changeMonth: true, 
    changeYear: true, 
    firstDay: 1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate, obj) { 
     var index = obj.input.data("index"); 
     $("#datePicker\\[" + index + "\\]_StartDate").datepicker("option", "maxDate", selectedDate); 
    } 
});