MVC4 Invalid DateTime value

Question

I tried almost all what I read on the internet, on this website (the globlalization culture in the web.config, the DisplayFormat added in my model,...) but I didn't find my answer.

My web app allows the user to create persons by providing some information. One of these information is the Start date, which is a DateTime value. I'm using the jQuery UI date picker to allow the choice of the date through a calendar. As I choose my date (in fact, a date where the day is greater than 12), the application shows me an validation error message. For example, if I choose today's date, it will appear : The value '03/15/2013' is not valid for StartDate.

My View :

    @model BuSIMaterial.Models.Person

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Person</legend>

        <div class="editor-label">
            First name : 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            Last name : 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            National number : 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.NumNat, new { maxlength = 11 })
            @Html.ValidationMessageFor(model => model.NumNat)
        </div>

        <div class="editor-label">
            Start date : 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.StartDate, new {@class = "datepicker" })
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>

        <div class="editor-label">
            End date : 
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
            @Html.ValidationMessageFor(model => model.EndDate)
        </div>

        <div class="editor-label">
            Distance House - Work (km) : 
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.HouseToWorkKilometers)
            @Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
        </div>

        <div class="editor-label">
            Category : 
        </div>
        <div class="editor-field">
            @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
            @Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) <a href = "../ProductPackageCategory/Create">Add a new category?</a>
        </div>

        <div class="editor-label">
            Upgrade? : 
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Upgrade)
            @Html.ValidationMessageFor(model => model.Upgrade)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")
    <script type="text/javascript">
        $(document).ready(function () {
            $(".datepicker").datepicker({

            });
        });
    </script>
}

The Start Date in my Person Model :

[EdmScalarPropertyAttribute(EntityKeyProperty=false, IsNullable=false)]
    [DataMemberAttribute()]
    public global::System.DateTime StartDate
    {
        get
        {
            return _StartDate;
        }
        set
        {
            OnStartDateChanging(value);
            ReportPropertyChanging("StartDate");
            _StartDate = StructuralObject.SetValidValue(value);
            ReportPropertyChanged("StartDate");
            OnStartDateChanged();
        }
    }
    private global::System.DateTime _StartDate;
    partial void OnStartDateChanging(global::System.DateTime value);
    partial void OnStartDateChanged();

Does anybody have a solution to deal with this problem?

Answer 1

First off, you appear to be passing a raw entity to your view which is not a good idea. The correct approach in MVC is to create a view model which contains all the information your view needs, nothing more, nothing less.

Now to your problem:

As I choose my date (in fact, a date where the day is greater than 12), the application shows me an validation error message

This gives me the impression this is a culture clash issue, your MVC app is expecting the date as dd/mm/yyyy but receiving it as mm/dd/yyyy. The default model binder in MVC will use the culture of the current thread - if you're sure that thread is using the correct culture then my guess would be it doesn't like the fact your only passing a Date instead of a DateTime, unlikely though.

Usually the best approach is to use a standardized date format which is culture-agnostic i.e. UTC Format, that way you avoid any conversion issues.