JQuery UI datepicker not working with asp.net mvc

Question

I work in MVC. I used jQuery datepicker for my "Date" control. The jquery code for calling datepicker is below:

$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); }); 

My DateTime Partialview:

  @Html.TextBoxFor(x => x.Value, new { id = Model.Name, name = Model.Name, @class = "date", @readonly = true }) 

and my DateTimeViewModel properties:

  public string Name { get; set; } public DateTime? Value { get; set; } 

I use this partial view in a form. As soon as I completely fill out my form and click on the "Submit" button, the focus goes back to my date to pick up the date again. This happens again and again, and my form becomes unable to comply. I am debugging this control on chrome and I noticed that the date is not valid as indicated below: -

  <input class="ff date hasDatepicker input-validation-error" data-val="true" data-val-date="The field Value must be a date." name="Fields[Lea_ex1_47].Value" readonly="True" type="text" value="" id="dp1369308655980"> 

EDIT Sorry to mention this late, but I also watched it now. My date picker accepts a date from 1 to 12 of each month. That is: from 30/31 days he will accept a date from 1 to 12 (confirm the truth) and the other 13-31 that give a verification error (confirm the lie).

Tell me why this is happening? and how can i get rid of this?

Thanks in advance.

Answer 1

Probably this part:

 { dateFormat: "dd/mm/yy" } 

This is not the default, since .NET shows the date, so jQuery may not understand it. You must make sure that the day is up to a month and the year is 2 digits.

Edit: After reading your edit about a control error, when the day is more than 12, this definitely causes this. However, the problems that I mentioned below may still cause problems after you set the date format.

Other potential problems:

You set the readonly HTML attribute, and I don't know why you will do this:

 @readonly = true 

This will either do nothing or suppress the datepicker popup.

Finally, I notice that you manually determine the name and identifier:

 id = Model.Name, name = Model.Name 

What is the editor for Model.Value , so why do you connect it to Model.Name ? Does anything else on your page have the same identifier? Does another form field have the same name? If so, it can damage things on both the client and the server. You do not even need to specify them; helper method MVC can do this for you.

What to do:

First of all, annotate your ViewModel, as some suggested, but make sure the format is right:

 [UIHint("DateTime")] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:dd/mm/yy}", ApplyFormatInEditMode = true)] public DateTime? Value { get; set; } 

This should fix this, but also consider removing the id , name and readonly attributes from your Razor code completely.

If you are using HTML5, one thing that may help is to use EditorFor instead of TextBoxFor . This should make it use the HTML5 DateTime input type. jQuery-UI should not have any problems processing the TextBox, but it cannot hurt.

 @Html.EditorFor(x => x.Value, new { @class = "date" }) 

Answer 2

using UIHint it's easy to set datepicker

 [UIHint("DateTime")] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)] [Display(Name = "Due Date")] public Nullable<System.DateTime> Value{ get; set; } 

Add the DateTime.cshtml file to this Shared / EditorTemplates path.

 @model Nullable<System.DateTime> @if (Model.HasValue) { @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" }) } else { @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" }) } @{ string name = ViewData.TemplateInfo.HtmlFieldPrefix; string id = name.Replace(".", "_"); } <script type="text/javascript"> $(function () { $("#@id").datepicker({ dateFormat: "mm/dd/yy" }); }); </script> 

Answer 3

Can you try to annotate a property of your view model, for example:

 [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)] public DateTime? Value { get; set; } 

Answer 4

As a workaround, I will reformat the value of the datepicker text field at the time of sending, so it will format back to mm / dd / yy.

 $('#submit').submit(function() { var dateTypeVar = $('#txtDateBirth').datepicker('getDate'); var oldFormat = $.datepicker.formatDate('mm/dd/yy', dateTypeVar); $('#txtDateBirth').val(oldFormat); }); 

when postback mvc can now know the format.

Hope this helps