多个输入字段上的 Jquery 时间选择器

Question

我正在使用 此网站 中的 timepicker

在我的页面中有多个字段，例如不时。我正在为此创建动态名称和 ID。

PHP 代码：

<?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 代码：

<script type="text/javascript">
        $(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: 'dd-mm-yy',
                        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);
            }

        $('.time-pick').timepicker({});
        $("#frmSubmitArtwork").validate({
                errorClass: 'jqueryError',
                validClass: 'jqueryValid',
                errorElement: 'label',
                success: 'jqueryValid',
                messages: {
                    txtTitle: {
                        required: 'Please enter title'
                    },
                    cmbType: {
                        required: 'Please choose type',
                    },
                    txtDescription: {
                        required: 'Please enter description'

                    }

                }
            });
        });

    </script>   

我希望 to 时间应该始终大于 from 时间，就像我一样对 fromdate 和 todate 字段执行此操作。日期选择器文档中有 fromdate 和 todate 验证的示例，但我已阅读 timepicker 文档，但我无法弄清楚如何实现此目的？

Answer 1

好消息。

timepicker 的作者已更新了插件主页上的代码（至版本 0.2.5）和示例，其中包含您正在寻找的内容：“两个用于选择时间顺序的时间范围的时间选择器”。 在此处查看。

Answer 2

如果我理解正确，您的场景如下：

1. 用户填写 fromTime 字段

2. 当他填写 toTime 字段时，您需要验证。

解决方案可能是这样的：

1. 只需在该字段上放置一些事件，例如 onfocusout （不知道..）检查一下。找出当用户离开 toTime 框时最适合触发的事件。

2. 在此事件上放置一个函数，将输入的值与 fromTime 字段中找到的值进行比较。这是一个微不足道的日期比较！

希望这就是您所要求的。还有一个提示，如果日期字段已经实现了这样的功能，只需看看这是如何完成的。