CODEWITHSUNDEEP
jqueryjquery-ui
user2848031
user2848031

Reputation: 227

How to repeate the jquery datepicker icon?

I need to display the text box with datepicker icon to select the date.Based on the list of values, the text box will list to update the date.

My problem is if i have 5 records, then i'm displaying the 5 text boxes with datepicker icon , but the icon displaying only first text box. its not repeating the icons all the text boxes.

Please see the below code:

<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 :

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

Please advise why i'm not getting repeating date picker ?

Upvotes: 0

Views: 121

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You are creating multiple elements with the same id, since the input elements are created in a loop. ID of an element in a document must be unique. Use class value to group similar elements.

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

then

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

When ID selector is used and there are multiple elements with the same ID then it will select only the very first element with the id, so in your case the datepicker widget was not initialized for other elements

Upvotes: 1

Related Questions