Validation failing because of date format

Question

I have an MVC6 Edit View with a date of birth field as follows:

<div class="form-group">
    @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @*@Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })*@
        @Html.EditorFor(m => m.DateOfBirth,new { htmlAttributes = new { @readonly = "readonly" } })
        @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
    </div>
</div>

Therefore when I click save it errors saying: The value '07/17/1981' is not valid for ApplicationDate. How can I ensure that the date is displayed in UK format meaning validation succeeds.

I have added the following to the Bubdle.Config following an answer below:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/globalize.js",
                        "~/Scripts/jquery.validate.globalize.js"));

Please read [ask] and share your research. Plenty of existing questions deal with this exact issue. — CodeCaster, Jul 18 '17 at 14:28
@Codecaster, the field is read only (as shown in the code). Your links suggest using DatePicker and did not help. — w0051977, Jul 18 '17 at 14:55
Oh the irony, I had the same issue today and the suggestions on [here](https://stackoverflow.com/questions/6906725/unobtrusive-validation-in-chrome-wont-validate-with-dd-mm-yyyy) didnt work for me. I opted to creat a custom editor template that had no validation attributes. — Scrobi, Jul 18 '17 at 19:52
@Scrobi, could you explain what you mean by "custom editor template"? — w0051977, Jul 18 '17 at 19:54
@Scrobi, I know Display Only would resolve it. I am just intrigued. — w0051977, Jul 18 '17 at 19:55
Bit too much to explain in a comment but, you can read more about display and editor templates [here](http://www.growingwiththeweb.com/2012/12/aspnet-mvc-display-and-editor-templates.html). I can add my code tomorrow when back at my computer. — Scrobi, Jul 18 '17 at 19:59
You have added a `readonly` attribute to the form control. Are you applying a jquery datepicker plugin to that property or are you really just wanting display only (in which case use a view model and do not create a form control) — , Jul 20 '17 at 02:58

score 0 · Answer 1 · edited Jul 18 '17 at 14:27

0

Update your model like this:

// Add this attribute
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)] 
public  DateTime DateOfBirth { get; set; }

edited Jul 18 '17 at 14:27

Heretic Monkey

11,687
7
53
122

answered Jul 18 '17 at 14:24

Abhay Dixit

998
8
28

1

That made absolutely no difference whatsoever. – w0051977 Jul 18 '17 at 14:28
Did you try this: https://stackoverflow.com/questions/15044132/datetime-format-according-to-the-culture-in-mvc – Abhay Dixit Jul 18 '17 at 14:37
Why do I have to use JQuery for this? – w0051977 Jul 18 '17 at 14:49
Adding the attribute in your model should work. In your razor syntax, convert your date into string format with dd/mm/yyyy like this: @Html.EditorFor(model => model.DateOfBirth.value.ToString("dd. MM. yyyy"), new { htmlAttributes = new { @class = "form-control" } }) – Abhay Dixit Jul 19 '17 at 06:41
I will try that shortly. I really don't think it will be that simple though as there are lots of cases on here that state the globalize plugin is needed. Why are all these people having problems if all you have to do is what you state? – w0051977 Jul 19 '17 at 06:45
I think you should try this, because I know you are enough smart to set culture before working on this application. By the way you can set it by . For page level you can set the UICulture by using <%@ Page UICulture="es" Culture="es-MX" %>. Hope this helps – Abhay Dixit Jul 19 '17 at 06:51

Christopher Thrower · Answer 2 · 2017-07-18T15:38:26.920

0

I'm assuming your error is client-side? i.e. Unobtrusive validation? An alternative solution to the one already posted is to use the Globalization.

There is a Nuget package available "jQuery.Validation.Globalize. You can install this and simply include the globalize Javascript files with your jqueryval bundles.

You can do this by navigation to the App_Start directory and editing the BundleConfig.cs file. You'll see there should already be a ScriptBundle for bundles/jqueryval - You can add the path to the globalize.js and jquery.val.globalize.js files to that, or create a separate ScriptBundle to reference in your View.

Note: This will only work if you add the CultureInfo to your Global.asax file as below.

You'll also need to add the below to your Global.asax file.

Thread.CurrentThread.CurrentCulture = new CultureInfo("en-GB");

edited Jul 18 '17 at 15:38

answered Jul 18 '17 at 14:25

Christopher Thrower

730
7
22

That made absolutely no difference whatsoever. – w0051977 Jul 18 '17 at 14:32
Have you installed the Globaliza Nuget package and included the JavaScript files to your page? I had exactly the same issue as this yesterday & Globalize fixed it for me. – Christopher Thrower Jul 18 '17 at 14:37
Surely there is a way to avoid JQuery? I just want the date to display in a format (it will not be editable). – w0051977 Jul 18 '17 at 14:50
It would depend on your setup. The common cause for this issue is the use of Jquery's Unobtrusive validation. In which case, the Globalization package would resolve that issue. The error is with the client-side validation, not the backend. You could also bypass it by overriding the date attribute within the Unobtrusive validation – Christopher Thrower Jul 18 '17 at 15:24
How do I: "include the globalize Javascript files with your jqueryval bundles". Thanks. – w0051977 Jul 18 '17 at 15:34
I have updated my answer to clarify how to add those files to your bundles. – Christopher Thrower Jul 18 '17 at 15:38
Could you break your instructions down in steps. Could you also provide the relative paths of the .JS files in the instructions? Thanks. – w0051977 Jul 19 '17 at 05:00

score 0 · Answer 3 · answered Jul 19 '17 at 07:13

0

In the director Views/Shared/EditorTemplates I added a view UKDate.

The code for my particular view is:

@model DateTime?

@{
    if (Model.HasValue)
    {
        var classname = ViewData["class"];
        var id = ViewData["id"];

        <input type="text"
               name="@ViewData.TemplateInfo.HtmlFieldPrefix" //this needed to map the input to the property in your model, by the default model binder.
               value="@Model.Value.ToString("dd/MM/yyyy")" 
               class="@classname"
               id="@id"
            />
    }
}

Then to use it I do the following:

@Html.EditorFor(x => x.YourDateFieldDate, "UKDate", new { @class = "any css classes required here", id = "Id here" })

As there is now no data-val-date attribute the validation is not run. So this solves the problem if you don't care about any client side date validation.

answered Jul 19 '17 at 07:13

Scrobi

1,215
10
13

Why didn't you use the Globalise plugin? There are loads of questions and answers on here about it. I have tried them all and nothing works. – w0051977 Jul 19 '17 at 07:15
I have tried this [answer](https://stackoverflow.com/a/13528769/5148649), but it did not work for me. Looking at the Globalize repo though this answer looks like it maybe for an older version. – Scrobi Jul 19 '17 at 07:46
It is really bad that there is absolutely no documentation whatsoever explaining how to resolve this very critical issue. – w0051977 Jul 19 '17 at 08:15

score 0 · Answer 4 · answered Mar 28 '18 at 15:58

Take a look to the example on this page, check if it does what you want.

https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/AdvancedDemo/Globalize.html

I saw you asked why you need to include jquery, the answer is because microsoft validation happens thanks to jquery, they work together to achieve this.

If you page is english en-US, default validation will work, but if your culture is different like mine, you need at least to include what is mentioned in that page (basically jquery, globalize and validation).

Globalize will override Validation to work in your desired culture.

Give it a try and let me know.

Validation failing because of date format

4 Answers4

Linked