在輸入日期字段的多次迭代中加載日期選擇器

Question

我有一個PHP對於多次輸入加載5次相同的輸入字段集。

與此同時，我有一個「datepicker」javascript在日期字段中運行。

問題是僅在第一行datepicker正在工作。對於下一個加載的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> 

Answer 2

相同的ID是不允許它必須是唯一的 - ID = 「日期選擇器」

Answer 3

使用，而不是一個ID類。

給每輸入一個類「日期選擇器」，並且您的jQuery選擇更改爲$(".datepicker")