複数入力フィールドのJquery日付ピッカー

Question

私は、fromdateとtodateである複数の入力フィールドがあるページを持っています。ダイナミックIDと名前を作成しました。 jquery date pickerを使用しました。

コード：日付ピッカーの場合

<?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変数は、ループで設定された最後の項目と等しくなります。

更新は、このコードを試してみてください。

アップデート2もう一つは、変数iの問題です。その現在の値はループ中に使用できるので、後でonSelectハンドラが使用されるとき、iは前回の反復と同じ値を持ちます。これを克服するには、別の関数のコンテキストにiを入れなければなりません。そのため、ループの本体にあるコードを別の関数にラップして、iという変数を渡しています。

更新3さらにもう1つ - オプションを選択するロジック（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); 
    } 
});