1

我正在使用这个网站上的时间选择器

在我的页面中，不时有多个字段。我正在为此创建动态名称和 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>

我希望时间应该总是大于从时间，就像我对 fromdate 和 todate 字段所做的那样。datepicker 文档中有 fromdate 和 todate 验证的示例，但我已阅读 timepicker 文档，但我无法弄清楚如何完成此操作？

4

2 回答 2

2

好消息。

timepicker 的作者更新了代码（到版本 0.2.5）和插件主页上的示例，其中包含您正在寻找的内容：“两个 timepickers 来选择按时间顺序排列的时间范围”。在这里检查。

于 2011-09-14T12:43:51.617 回答
1

如果我理解正确，您的情况是这样的：

  1. 用户填写 fromTime 字段

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

一个解决方案可能是这样的：

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

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

希望这是你所要求的。还有一个提示，如果已经为日期字段实现了这样的事情，那么看看那里是如何完成的。

于 2011-09-13T13:46:40.347 回答