php – 多输入字段上的Jquery日期选择器

我有一个页面,其中有多个输入字段是fromdate和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日期选择器.在上面的代码中,我已经应用了从日期到日期的验证,即到日期应该大于从日期开始.

上述代码的问题是此验证仅应用于最后一行.

我希望这个验证应该应用于所有行.

解决方法

您在循环的每次迭代中重新声明日期变量.因此,当循环完成时,您在onSelect处理程序中使用的日期变量等于循环中设置的最后一项.

更新试试这段代码：

Update2还有一个问题是变量i的问题.它的当前值在循环中可用,因此稍后,当使用onSelect处理程序时,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(),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,instance.settings);
                    otherPicker.datepicker("option",date);
                }
            };
        })(i);
    }
});