Question

I am using timepicker from this website

In my page there are multiple fields like from time to time. I am creating dynamic names and ids for this.

PHP code:

<?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 Code:

<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>   

I want that to time should always be greater than from time just like what i did for fromdate and todate fields. There was example of fromdate and todate validation in datepicker documentation but i have read the timepicker documentation but i am unable to figure out how to accomplish this?

Answer 1

Good news.

The author of timepicker has updated the code (to version 0.2.5) and examples at plugin homepage with something you are looking for: “Two timepickers to select chronological time range”. Check it here.