Loading datepicker in multiple iterations of an input date field

Question

I have a PHP For that loads 5 times the same set of input fields for multiple entries.

At the same time, I have a "datepicker" javascript to be run in the date field.

The issue is that only in the first row the datepicker is working. For the next 4 rows loaded, the datepicker doesn't run in the date field.

Code:

    <?php 
    for ($i=0;$i<5;$i++)
    {
    ?>
    <tr>
        <td><input id="includeItem" type="checkbox" onchange="includeMore" name="item<?=$i?>"></td>
        <td><input name="id<?=$i?> style="color:#888;" disabled="disabled"></td>
        <td><input class="formItems" id="datepicker" name="date<?=$i?>"></td>
        <td><input class="formItems" name="description<?=$i?>"></td>
        <td><input class="formItems" name="amount<?=$i?>"></td>
    </tr>
    <?php } ?>

Javascript:

<script>
  $(document).ready(function() {
    $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd'
    });
  });
</script>

hazerd · Accepted Answer · 2013-10-24 16:18:05Z

3

IDs should be unique on a page. That means that when you try to select an ID with jQuery it will stop on the first one it finds.

You should use a class to circumvent this, like so.

Code:

    <?php 
    for ($i=0;$i<5;$i++)
    {
    ?>
    <tr>
        <td><input id="includeItem" type="checkbox" onchange="includeMore" name="item<?=$i?>"></td>
        <td><input name="id<?=$i?> style="color:#888;" disabled="disabled"></td>
        <td><input class="formItems" class="datepicker" name="date<?=$i?>"></td>
        <td><input class="formItems" name="description<?=$i?>"></td>
        <td><input class="formItems" name="amount<?=$i?>"></td>
    </tr>
    <?php } ?>

Javascript:

<script>
  $(document).ready(function() {
    $(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd'
    });
  });
</script>

edited Oct 24, 2013 at 16:18

answered Oct 24, 2013 at 15:59

hazerd

5924 silver badges6 bronze badges

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

Comments

LisaK1308 · Accepted Answer · 2013-10-24 15:58:33Z

1

The same id is not allowed it must be unique - id="datepicker"

answered Oct 24, 2013 at 15:58

LisaK1308

1811 silver badge6 bronze badges

Comments

CalamityJames · Accepted Answer · 2013-10-24 15:59:00Z

1

Use a class as opposed to an ID.

Give each input a class of "datepicker" and change your jQuery selector to $(".datepicker")

answered Oct 24, 2013 at 15:59

CalamityJames

464 bronze badges

Collectives™ on Stack Overflow

Loading datepicker in multiple iterations of an input date field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related