如何重复jquery datepicker图标？

Question

我需要显示带有日期选择器图标的文本框以选择日期。基于值列表，文本框将列出以更新日期。

我的问题是，如果我有5条记录，那么我显示带有日期选择器图标的5个文本框，但显示只有第一个文本框的图标。它不会重复所有文本框的图标。

请参阅下面的代码：

<c:forEach items="${list}" var="product"> 
     <tr> 
      <td>${product.prodname}</td> 
      <td>${product.version}</td> 
      <td>${product.end_date}</td> 
      <td><input type="text" id="datepicker" name="new_end_date" value="<jsp:getProperty name="licenseupdate" property="new_end_date" />" style="width:100" /> 
     </tr> 
    </c:forEach> 

jQuery函数：

$(function() { 
$("#datepicker").datepicker({ 
showOn: "button", 
buttonImage: "images/calendar.gif", 
buttonImageOnly: true 
}); 
}); 

请告知为什么我没有收到重复的日期选择器？

Answer 1

由于输入元素是在循环中创建的，因此您正在使用相同的id创建多个元素。文档中元素的ID必须是唯一。使用类值来分组类似的元素。

<td><input type="text" class="datepicker" name="new_end_date" value="<jsp:getProperty name="licenseupdate" property="new_end_date" />" style="width:100" /> 

然后

$(function() { 
$(".datepicker").datepicker({ 
showOn: "button", 
buttonImage: "images/calendar.gif", 
buttonImageOnly: true 
}); 
}); 

当ID选择器被使用，并且存在具有相同ID的多个元素则它将仅选择与该ID的第一个元素，因此在你的情况下，日期选择器窗口小部件是未初始化为其他元素