Question

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

我的问题是，如果我有5条记录，那么我正在显示带有datepicker图标的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的第一个元素，因此在您的情况下，datepicker小部件未针对其他元素进行初始化

如何重复jquery datepicker图标？

1 个答案: