JQuery DataPicker not picking up default format in MVC2

Question

I'm using MVC2 and have included the Jquery DateTime picker. For some reason it is not using the default format settings when the pages loads.

The model is passing in a Date and I have set the format to 'dd/mm/yyyy' as I do not want the time to be displayed. The html.editorfor that the datepicker is attached to, shows in the standard 'mm/dd/yyyy hh:mm:ss' format, consequently the validation kicks in with "invalid Date" if the model value if say '15th October 2010', because the standard format complains that there is no "15th" month.

Code from the DatePicker is...

<%= Html.TextBox("", (Model.HasValue ? Model.Value.Date.ToString("dd/mm/yyyy") :  
DateTime.Today.ToString("dd/mm/yyyy") ), new { @class = "date" }) %>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $("#datepicker").datepicker(
        {
            dateFormat: 'dd/mm/yy',
            defaultDate: new Date(),
            minDate: new Date()

        });
    });
</script>

Code calling Datepicker...

<div>
    <%=Html.LabelFor(Model => Model.StartDate)%>
    <%=Html.EditorFor(Model => Model.StartDate, new { @class = "date" }) %>
    <%=Html.ValidationMessageFor(Model => Model.StartDate, "*")%>
</div>

Any ideas?

Answer 1

Are you setting the ID of the textBox correctly, I can see you have a class "date" but not the id.

you may also need the localization files for the datepicker available at Google

I still can't see in your javascript where the selector:

$("#datepicker")

is associated to your textbox. Shouldn't the selector be

$('.date')

Maybe I'm missing something.

Answer 2

It seems the problem is actually with the HTML.TextBox rather than the actual JQuery...

This line seems to be the problem,

<%= Html.TextBox("", (Model.HasValue ? Model.Value.Date.ToString("dd/MMM/yyyy") :
DateTime.Today.ToString("dd/MMM/yyyy")), new { @class = "date" })%>

I have broken down the line as follows to check the different elements are working correctly, and they are...

<div><%=  Model.HasValue %></div>
<div><%=  Model.Value.Date.ToString( "dd/MM/yyyy" )  %></div>
<div><%=  DateTime.Today.ToString("dd/MM/yyyy")%></div>

So, simply - this line in a template causes the date formatting to be ignored... any suggestions?

<div><%= Html.TextBox("", Model.Value.Date.ToString("dd/MM/yyyy"))%></div>

Answer 3

Going back to what Simon Hazelton said about ID's.

If I give the html.textbox an id e.g

<%= Html.TextBox("MyID", (Model.HasValue ? Model.Value.Date.ToString("dd/MMM/yyyy") :
DateTime.Today.ToString("dd/MMM/yyyy")), new { @class = "date" })%>

The formatting is picked up correctly, however - the model binding is then broken as it changes the name to "ModelName.MyID", therefore the model is not updated with the new value.

<input class="date" id="StartDate_MyID" name="StartDate.MyID" type="text" value="02/05 
/2012" />

Without the ID the html.textbox output looks like this, showing the correct Model binding name but the incorrect date format..

<input class="date" id="StartDate" name="StartDate" type="text" value="05/02/2012 
00:00:00" />

Has anyone else suffered this and if so, how to solve it?? Many thanks