CODEWITHSUNDEEP
phpjavascriptjquerytimepicker
Pankaj Khurana
Pankaj Khurana

Reputation: 3271

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.

enter image description here

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?

Upvotes: 1

Views: 4925

Answers (2)

WTK
WTK

Reputation: 16971

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.

Upvotes: 2

Melsi
Melsi

Reputation: 1462

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.

Upvotes: 1

Related Questions