Razor DateField validation fails saying "must be a date"

Question

Have a razor form with two date fields displayed as textboxes using the jQuery datepicker plugin for selecting a data range. The start date works fine but the end date fails validation and says "The field End Date must be a date." Below is the Model code and the .cshtml code:

    [Display(Name = "Start Date")]
    public Nullable<DateTime> startDate { get; set; }

    [Display(Name = "End Date")]
    public Nullable<DateTime> endDate { get; set; }

        <div id="dvDateRange">
            @Html.TextBoxFor(e => e.startDate, new { @class = "datepicker", Value = Model.startDate.Value.ToString("dd/MM/yyyy") })
            <span> to </span>
            @Html.TextBoxFor(e => e.endDate, new { @class = "datepicker", Value = Model.endDate.Value.ToString("dd/MM/yyyy") })
        </div>

Both have been set up identically so why would the start date succeed and the end date fail?

Any ideas?

Edit

So is definitely a culture issue and seems to be Chrome that is causing the problem. Have made the following modifications and still get same problem.

Model code:

    [Display(Name = "Start Date")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<DateTime> startDate { get; set; }

    [Display(Name = "End Date")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<DateTime> endDate { get; set; }

.cshtml code:

        <div id="dvDateRange">
            @Html.EditorFor(e => e.startDate, new { @class = "datepicker", Value = Model.startDate.Value.ToString("dd/MM/yyyy") })
            <span> to </span>
            @Html.EditorFor(e => e.endDate, new { @class = "datepicker", Value = Model.endDate.Value.ToString("dd/MM/yyyy") })
        </div>

Datepicker code:

    $("#dvDateRange input").datepicker({
        showOn: "button",
        buttonImage: "/Images/calendar.gif",
        buttonImageOnly: true,
        dateFormat: "dd/mm/yy"
    });

Anyway of over-riding the culture settings in Chrome?

Most probably you have different cultures on the Browser and the Server. May the start date is correct because the day is less than 12 (so 5th of June 2014 is valid date in both formats: 05/06/2014 and 06/05/2014) — ssimeonov, Jun 05 '14 at 08:57
That seems sensible. How can force it to use the format throughout? — HuwD, Jun 05 '14 at 09:00
You can check this http://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format — ssimeonov, Jun 05 '14 at 09:04

score 1 · Answer 1 · edited Jun 05 '14 at 11:43

1

why not using

[Display(Name = "Start Date")] public DateTime? startDate { get; set; }

instead?

edited Jun 05 '14 at 11:43

Reporter

3,897
5
33
47

answered Jun 05 '14 at 11:00

Danny

301
1
4
21

score 0 · Answer 2 · edited May 23 '17 at 12:07

Finally managed to get this work using the code below found at Asp.net MVC set validation date format fails on Chrome

        $.validator.addMethod('date',
        function (value, element, params) {
            if (this.optional(element)) {
                return true;
            }

            var ok = true;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
                ok = false;
            }
            return ok;
        });

Razor DateField validation fails saying "must be a date"

2 Answers2