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

Question

我有一个 PHP For，它为多个条目加载同一组输入字段的 5 倍。

同时，我有一个“datepicker”javascript 要在date 字段中运行。

问题是日期选择器仅在第一行有效。对于接下来加载的 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>

Answer 1

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>