Question

中的时间戳

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

enter image description here

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文档，但我无法弄清楚如何实现这个目标？

Answer 1

好消息。

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

Answer 2

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

用户填写fromTime字段
当他填写toTime字段时，您需要进行验证。

解决方案可能是这样的：

只需在该字段上放置一些事件，例如onfocusout（不知道......）检查一下。查找用户离开toTime框时触发的最佳事件。
在此事件中放置一个函数，用于将输入的值与fromTime字段中找到的值进行比较。这是一个微不足道的约会比较！

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

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

2 个答案: