jQuery UI datepicker not working right with asp.net mvc

Question

I am working in MVC. I have used jQuery datepicker on my "Date" control.The jquery code for calling datepicker is given below:

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

My DateTime Partialview is :

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

and my DateTimeViewModel properties are :

    public string Name { get; set; }

   public DateTime? Value { get; set; }

I am using this partial view in a form. Once i completely fill up my form and click on submit, the focus again goes to my datepicker to again pick up the date. It happens again and again and my form become unable to submit. I debug this control on chrome and the i noticed that date is not valid as given 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 for mentioning it late but i also observed it now. My datepicker taking the date from 1 to 12 of each month only. That is: Out of 30/31 days it will take the date from 1 to 12 (validate true) and other 13 to 31 giving validation error(validate false).

Kindly give me reason why this is happening? and how can i get rid of this?

Thanks in advance..

Answer 1

It's probably this part:

{ dateFormat: "dd/mm/yy" }

That's not the default way .NET displays a date, so jQuery might not able to parse it. You need to make sure the day comes before the month, and the year is 2 digits.

Edit: After reading your edit about the control failing when the day is greater than 12, this is definitely causing that. However, the issues I mentioned below might still cause problems after you've fixed the date format.

Other potential problems:

You're setting a readonly HTML attribute, and I don't know why you would do that:

@readonly = true

This will either do nothing or suppress the datepicker from popping up.

Lastly, I notice you're setting the name and ID by hand:

id = Model.Name, name = Model.Name

That's the editor for Model.Value , so why are you connecting it to Model.Name ? Does anything else in your page have the same ID? Does any other form field have the same name? If so, it's likely to break things on both the client and the server. You don't even need to specify those; the MVC helper method can do it for you.

What to do:

First of all, annotate your ViewModel as some have 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; }

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

If you're using HTML5, one thing that might help is using EditorFor instead of TextBoxFor . That should cause it to use the HTML5 DateTime input type. jQuery-UI shouldn't have any trouble handling TextBoxes, but it can't hurt.

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

Answer 2

using UIHint 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 DateTime.cshtml file in this path Shared/EditorTemplates

@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 annotating your view-model property like:

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

Answer 4

As a workaround I'm reformatting the value of the textbox datepicker during submit 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 will be able to know now the format.

Hope this helps