在多个输入字段上的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); 
    } 
});