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

【问题标题】：Loading datepicker in multiple iterations of an input date field在输入日期字段的多次迭代中加载日期选择器
【发布时间】：2013-10-24 15:56:19
【问题描述】：

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

同时，我在 date 字段中运行了一个“datepicker”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>

【问题讨论】：

标签： javascript php forms input datepicker

【解决方案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>

【讨论】：

【解决方案2】：

不允许使用相同的 id，它必须是唯一的 - id="datepicker"

【讨论】：

【解决方案3】：

使用类而不是 ID。

给每个输入一个“datepicker”类并将你的jQuery选择器更改为$(".datepicker")

【讨论】：