Having a problem with multiple jquery ui datepickers

Question

i have one jquery ui datepicker working fine. I am now adding a second one (to have start date and end date) and when i click inside the second textbox the datepicker dropdown of the first textbox pops up (instead of the second).

has anyone seen this or know of any other quirks when having multiple datepickers:

here is my code:

javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $('#startDate').datepicker({ dateFormat: 'dd M yy' } );
        $('#endDate').datepicker({ dateFormat: 'dd M yy' } );
    });
</script>

html:

<label>Date Range: Start  <%= Html.TextBox("StartDate", Model.StartDate.ToString("dd-MMM-yyyy"), new Dictionary<string, object> { { "id", "startDate" }, { "maxlength", 12 }, { "size", 12 } })%> End  <%= Html.TextBox("EndDate", Model.EndDate.ToString("dd-MMM-yyyy"), new Dictionary<string, object> { { "id", "endDate" }, { "maxlength", 12 }, { "size", 12 } })%> </label>

which generates (from view source)

 Start  <input class="hasDatepicker" id="startDate" maxlength="12" name="StartDate" size="12" value="01-Jan-0001" type="text">

End  <input class="hasDatepicker" id="endDate" maxlength="11" name="EndDate" size="11" value="01-Jan-0001" type="text"> 

Answer 1

This answer is obsolete now than the OP has edited his question.

Don't use "hasDatepicker" as a class name, it's used internally by JQuery and using it yourself messes things up. Just rename the class name and you'll be fine.

Answer 2

I figured out the issue: it turns out that the

<label>

tag was around both date pickers and when i removed the

<label>

tag it works now.