在多個輸入字段上的jquery日期選擇器

Question

我有一個頁面，其中有多個來自date和todate的輸入字段。我創建了動態ID和名稱。我用jQuery日期選擇器。

代碼：

<?php 
    $i=1; 
    foreach($locations as $location) 
    { 

?> 
<tr> 
<td><?php echo $location['name'];?></td> 
<td> 
<input type="text" name="txtFromDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtFromDate_<?php echo $i;?>"/> 
</td> 
    <td> 
<input type="text" name="txtToDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtToDate_<?php echo $i;?>"/> 
</td> 
<td> 
<input type="text" name="txtFromTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;" /> 
</td> 
<td> 
<input type="text" name="txtToTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;"/> 
    </td> 
    </tr> 
    <?php 
$i++; 
    } 
    ?> 

jQuery代碼對於日期選取器：

(document).ready(function(){ 
     var count=0; 
     count=<?php echo count($locations);?>; 

     for(i=1;i<=count;i++) 
     { 
      var dates = $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({ 
      defaultDate: new Date(), 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(selectedDate) { 
       var option = this.id == "txtFromDate_"+i ? "maxDate" : "minDate"; 
       var instance = $(this).data("datepicker"); 
       var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
    }); 
     } 

jQuery的日期選取器顯示沒有fromdate和日期字段。在上面的代碼中，我已經應用了從日期到日期驗證，即到日期應該大於從日期開始。

上述代碼的問題在於，此驗證僅應用於最後一行。

我想這個驗證應該適用於所有的行。

Answer 1

您在循環的每次迭代中都重新聲明瞭dates變量。因此，當循環完成時，您在onSelect處理函數中使用的變量dates等於循環中設置的最後一個項目。

更新試試這個代碼：

UPDATE2一件事是可變i的問題。它的當前值在循環中可用，所以稍後在使用onSelect處理程序時，i的值與上次迭代中的值相同。爲了克服這個問題，你必須將i置於另一個函數的上下文中，這就是爲什麼我在另一個函數中將代碼包裝在循環體中，而我正在將其傳遞給i變量。

Update3還有一件事 - 選擇選項（minDate或maxDate）的邏輯必須顛倒過來。

$(document).ready(function(){ 
    var count=0; 
    count=<?php echo count($locations);?>; 

    for(i=1;i<=count;i++) 
    { 
     (function(i) { 
      $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({ 
       defaultDate: new Date(), 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'yy-mm-dd', 
       onSelect: function(selectedDate) { 
        var option, otherPicker; 
        if (this.id == "txtFromDate_"+i) { 
         otherPicker = $("#txtToDate_"+i); 
         option = "minDate"; 
        } else { 
         otherPicker = $("#txtFromDate_"+i); 
         option = "maxDate"; 
        } 
        var instance = $(this).data("datepicker"); 
        var date = $.datepicker.parseDate(instance.settings.dateFormat ||  $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
        otherPicker.datepicker("option", option, date); 
       } 
      }; 
     })(i); 
    } 
});