Using jquery-datepicker for an array of elements

[GoogleCodeExporter]

What steps will reproduce the problem?

My form has input elements that can be dynamically added/removed.
One of them is a date element and I have assigned the " class='date-pick " to 
the element as:

<td><input type="text" name="order_date[]" size="20" maxlength="10" 
style="font-weight: normal;" class="date-pick"/></td>
<td><input type="text" name="quantity[]" size="25" maxlength="100" 
style="font-weight: normal;" /></td>

What is the expected output? What do you see instead?

The calendar.png icon shows up correctly for each of the dynamically generated 
elements.
When clicked, only the first one pops up a calendar while the succeeding ones 
don't.
I click on the succeeding icons and no calendar pops up.

How do I make sure that the calendar icon pops up on all the dynamically 
generated date input elements?

Also, how do I make the element itself non-editable? that is, the user should 
not be able to type in a date.

Please provide a URL to a page displaying the problem.
N/A

What version of the datepicker are you using? On what operating system? And 
Which Browser?
/**
 * Copyright (c) 2008 Kelvin Luck (http://www.kelvinluck.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * .
 * $Id: jquery.datePicker.js 103 2010-09-22 08:54:28Z kelvin.luck $
 **/

Operating System : Linux
Browsers: Internet Explorer and Safari

Please provide any additional information below.

Appreciate your help/suggestions.

Thanks,
Sunil.

Original issue reported on code.google.com by sunilla...@gmail.com on 6 Apr 2011 at 7:31

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Please ignore my question about making an element non-editable.
-- I made the element a readonly as such : readonly="readonly" - this is 
resolved.

My other question is :
How do I make the calendar pop-up when the user clicks on the element itself?

Original comment by sunilla...@gmail.com on 6 Apr 2011 at 7:45

[GoogleCodeExporter]

You need to make sure to reinitialise the date picker after dynamically adding 
elements to the document as it can only operate on elements which are in the 
document when you call .datePicker(). The calendar icon will appear after you 
initialise it...

Original comment by kelvin.l...@gmail.com on 14 Apr 2011 at 7:38

• Changed state: Fixed