ASP .NET MVC DateTime globalization. "The field Date must be a date."

Question

I have made a simple mvc app to test globalization/localization. I have made Resources.resx file and Resources.es.resx (spanish) file where I have strings that I want translated.

All strings are translated fine, but with DateTime format I am experiencing difficulties.

In the partial view I am using I use xd-soft datetimepicker for my date field like this:

razor syntax:

<div class="form-group">
        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-3" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Date, Resources.FormatSave, new { htmlAttributes = new { @class = "form-control input-sm datetimepicker1" } })
            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
        </div>
    </div>

and the script for datetimepicker looks like this:

<script type="text/javascript">

    jQuery('.datetimepicker1').datetimepicker({
        format: '@Resources.Format', //when local d.m.Y, when spanish d/m/Y
        theme: 'dark',
        lang: '@Resources.Language',
        closeOnDateSelect: true,
    });

</script>

When i use spanish format d/m/Y its alright and when i use d.m.Y i get validation message "The field Date must be a date.".

My model looks like this:

[Display(Name = "Date", ResourceType = typeof(Resources.Resources))]
[Required(ErrorMessageResourceType = typeof(Resources.Resources),
          ErrorMessageResourceName = "DateRequired")]
[DataType(DataType.DateTime)]
public DateTime Date { get; set; }

score 1 · Answer 1 · answered Jul 08 '15 at 10:55

1

Just try this. I found this solution when my dd/MM/yyyy format is not recognized as date format.

First create a new java script file with name jquery.validate.date.js with the below code in it

$(function () {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {
            var d = new Date();
            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        }
        else {
            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };
});

It overwrite the date validation function in jquery.validate.js

Then call the script just after jquery.validate.js like below

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.js")"/>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.date.js")"/>

answered Jul 08 '15 at 10:55

Sachu

7,555
7
55
94

Tried that but now i have "0x800a138f - javascript runtime error unable to get property 'webkit' of undefined or null reference" – knowkeen Jul 08 '15 at 11:25
[link]http://stackoverflow.com/questions/24390272/javascript-runtime-error-unable-to-set-property-webkit-of-undefined-or-null-r check this – Sachu Jul 08 '15 at 11:32
Not working either... I think my problem has to do something with Cultures not with the browser... – knowkeen Jul 08 '15 at 11:43
@knowkeen u r setting the culture right? else how the multilanguage will work? – Sachu Jul 08 '15 at 11:50
Yes I am setting it right and when i write a code DateTime.Now just to test it after i change it (when i debug), the format is changing in the way I want. but on the view i have validation problem. I don't have an idea why that happenes. – knowkeen Jul 08 '15 at 12:01
its jquery.validate.js pblm – Sachu Jul 08 '15 at 13:26
Now i added on the lower part of the view DateTime.Now and when i change cultures the format changes. So you are right it is something concerning jquery.validate.js and xdsoft datetimepicker I am using. I still havent found a solution. I tried installing globalize nuget but still no success. – knowkeen Jul 08 '15 at 13:31
do u really want to change the dateformat when culture change> – Sachu Jul 08 '15 at 13:33
inside the view in jquery according to the change in culture try to change the dateformat of datepicker `jQuery('#datetimepicker1').datetimepicker({ format:'d.m.Y' });` and `jQuery('#datetimepicker1').datetimepicker({ format:'d/m/Y' });` respectively – Sachu Jul 08 '15 at 13:38
That is what i am doing, and when I have the culture where format is d/m/Y it is okay, and when I have culture where format is d.m.Y it says “The field Date must be a date.” – knowkeen Jul 08 '15 at 13:41
No problem, thank you for helping me, if you have some good idea just let me know :) – knowkeen Jul 08 '15 at 13:47
@knowkeen is this occur in all browser or only in chrome? – Sachu Jul 08 '15 at 13:48
I am testing in IE11 but now i tried Chrome and it is the same. – knowkeen Jul 08 '15 at 13:53
@knowkeen for testing purpose remove the changes done acc to this answer and add `$('#DatePicker').removeAttr("data-val-date");` a script like this in your jquery and check where Datepicker should replace with ur datepicker name – Sachu Jul 08 '15 at 14:01
@knowkeen i know because dd/MM/yyyy format wont work in chrome..thats why this answer i used..that solved my issue – Sachu Jul 09 '15 at 06:25
dd.mm.yyyy doesnt work on any browser i tested... that is what gives me headache – knowkeen Jul 09 '15 at 06:27
@knowkeen try dd.mm.yy – Sachu Jul 09 '15 at 06:39

ASP .NET MVC DateTime globalization. "The field Date must be a date."

1 Answers1

Linked