Jquery Time Picker On Multiple Input Fields

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: 'P开发者_JAVA百科lease 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?

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.

If I have understood correctly your scenario is like this:

1. The user fills the fromTime field

2. When he fills the toTime field you want a validation.

A solution could be this:

1. Just put some event on that field, something like onfocusout (don't know..) check it out. Find what event is best that triggers when the user has left the toTime box.

2. On this event put a function that compares the value entered to the one found in the fromTime field. Its a trivial date compare!

Hope this is what you're asking for. And an other tip, if there is such thing already implemented for the date fields, just see how is this done there.