Jquery Date Picker On Multiple Input Fields

Question

I have a page in which there are multiple input fields that is fromdate and todate. I have created dynamic ids and name. I have used jquery date picker.

enter image description here

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 For Date Picker:

(document).ready(function(){
        var count=0;
        count=<?php echo count($locations);?>;

        for(i=1;i<=count;i++)
        {
            var dates = $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
            defaultDate: new Date(),
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function(selectedDate) {
                var option = this.id == "txtFromDate_"+i ? "maxDate" : "minDate";
                var instance = $(this).data("datepicker");
                var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
    });
        }

Jquery Date Picker is displayed for fromdate and to date fields. In the above code i have applied the from date to date validation i.e. to date should be greater than from date.

The problem with above code is that this validation is applied on the last row only.

I want that this validation should be applied to all the rows.

WTK · Accepted Answer · 2011-09-13 07:30:59Z

4

You redeclare the dates variable at every iteration of the loop. So when the loop is done, the dates variable that you're using in the onSelect handler is equal to last item that was set in the loop.

Update Try this code:

Update2 One more thing is the issue of variable i. Its current value is available while in the loop, so later on, when the onSelect handler is used, the i has a value as in last iteration. To overcome this, you have to put i in a context of another function, that's why I have wrapped code in the body of the loop in another function to which I'm passing i variable.

Update3 And one more thing - the logic for picking the option (minDate or maxDate) had to be reversed.

$(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: 'yy-mm-dd',
                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);
    }
});

edited Sep 13, 2011 at 7:30

answered Sep 13, 2011 at 6:58

WTK

17.1k6 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pankaj Khurana Over a year ago

thanks wtk for replying . can you please elaborate your answer?

Pankaj Khurana Over a year ago

i have applied the suggested code but its not working that is to date can be selected with less than from date.

WTK Over a year ago

Sorry for the mixups. There was one more bug - I've update the code.

Collectives™ on Stack Overflow

Jquery Date Picker On Multiple Input Fields

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related