多个输入框上的Jquery日期选择器

Question

多个输入框上的Jquery日期选择器

4

我有一个页面，其中有多个输入字段，即“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日期选择器用于显示fromdate和todate字段。在上面的代码中，我已经应用了从日期到日期的验证，即to date必须大于from date。

上述代码的问题在于此验证仅适用于最后一行。

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

- Pankaj Khurana

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WTK · Accepted Answer

在循环的每次迭代中，您都会重新声明 dates 变量。因此，当循环结束时，在 onSelect 处理程序中使用的 dates 变量等于在循环中设置的最后一个项目。

更新尝试这段代码：

更新2 变量 i 的问题还有一个，它的当前值仅在循环中可用，因此稍后在使用 onSelect 处理程序时，i 具有与最后一次迭代相同的值。要克服这个问题，您必须将 i 放置在另一个函数的上下文中，这就是为什么我将代码包装在循环体内的另一个函数中，我将 i 变量传递给该函数的原因。

更新3 还有一件事 - 挑选选项（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);
    }
});