Apply jQuery datepicker to multiple instances

Question

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.

<script type="text/javascript">     $(function() {         $('#my_date').datepicker();     }); </script>  <% Using Html.BeginForm()%> <% For Each item In Model.MyRecords%> <%=Html.TextBox("my_date")%> <br/> <% Next%> <% End Using%> 

Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID). I tried assigning a class to the text box and specifying:

$('.my_class').datepicker(); 

but while that shows a date picker everywhere, they all update the first text box.

What is the right way to make this work?

Answer 1

html:

<input type="text" class="datepick" id="date_1" /> <input type="text" class="datepick" id="date_2" /> <input type="text" class="datepick" id="date_3" /> 

script:

$('.datepick').each(function(){     $(this).datepicker(); }); 

(pseudo coded up a bit to keep it simpler)

Answer 2

I just had the same problem.

The correct way to use date pick is $('.my_class').datepicker(); but you need to make sure you don't assign the same ID to multiple datepickers.