Alex Rivera | Logout

Apply jQuery datepicker to multiple instances

Asked 2009-04-01T22:31:32.720
74

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?

javascript jquery jquery-ui
Edit
Report

4 Answers

133

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)

answered 2009-04-01T23:01:40.357
11

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.

answered 2010-12-06T21:46:10.293
1

The solution here is to have different IDs as many of you have stated. The problem still lies deeper in datepicker. Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div." This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.

Is there an option that can change this ID to be a class? I don't want to have to fork this script just for this one obvious fix!!

answered 2009-11-10T17:44:49.830
0

I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control. I was using ClientScript.RegisterStartupScript(), but forgot to give the script a unique key (the second argument). With both scripts being assigned the same key, only the first box was actually being converted into a datepicker. So I decided to append the textbox's ID to the key to make it unique:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
answered 2012-01-12T23:18:16.387

Your Answer