在输入日期字段的多次迭代中加载日期选取器


Loading datepicker in multiple iterations of an input date field

>我有一个PHP,它为多个条目加载了5倍相同的输入字段集。

同时,我有一个"日期选择器"javascript要在日期字段中运行。

问题是只有在第一行中日期选择器才能工作。对于接下来加载的 4 行,日期选取器不会在日期字段中运行。

法典:

    <?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>
ID 在

页面上应该是唯一的。这意味着当你尝试使用jQuery选择一个ID时,它将在找到的第一个ID上停止。

你应该使用一个类来规避这一点,就像这样。

法典:

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

不允许使用相同的 id,它必须是唯一的 - id="日期选择器"

使用类而不是 ID。

为每个输入提供一类"日期选择器",并将 jQuery 选择器更改为$(".datepicker")