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

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.