2011-09-13 36 views
1

我使用timepicker从this websitejQuery的时间选择在多个输入字段

在我的网页有喜欢不时多个领域。我正在为此创建动态名称和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文档,但我无法弄清楚如何完成此操作?

回答

2

好消息。

timepicker的作者已经更新了代码(版本0.2.5)和插件主页上的例子,您正在寻找的东西:“两个时间选择器来选择按时间顺序排列的时间范围”。 Check it here

1

如果我理解正确的情况是这样的:

  1. 用户填写的FROMTIME场

  2. 当他充满你想验证TOTIME领域。

一个解决办法是这样的:

  1. 只要把该领域的一些事件,像onfocusout在(不知道..)检查出来。查找当用户离开toTime框时触发的最佳事件。

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

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

相关问题