CODEWITHSUNDEEP
asp.net-mvcgoogle-chromejquery-globalize
PBum
PBum

Reputation: 133

MVC: Date in Chrome-browser

The problem: I want to show a date in german-format with globalize. With the solution mentioned in MVc 5 - validation german date with unobtrusiv js - a simple approach it works in IE and Firefox - no Problem.

But Google-Chrome uses the input-type "date" and shows an datepicker. The Validation ever failed.

Upvotes: 0

Views: 907

Answers (2)

sGermosen
sGermosen

Reputation: 374

the previous answer could help, but when you put it on server it will crash if like me, you make process counting with the information of dates field, so, the correct way to solve this issue and haven't future problems is the given by @RAVI VAGHELA on this post

you need to modify your Global.asax and add the next configuration, have in mind that it will rewrite all your dates formats and will ignore all that you have on server, so, be carefull

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var newCulture = (CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone();
            newCulture.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy";
            newCulture.DateTimeFormat.DateSeparator = "-";
            Thread.CurrentThread.CurrentCulture = newCulture;
        }

Note: this method have been test in azure, (west and Europa) local server (windows server 2012 on English) and locally (iis express on windows 10), please inform if there a issue about this method on other languages or region

Upvotes: 0

PBum
PBum

Reputation: 133

After reading a lot of answers here at stackoverflow I came to this solution:

In the model I introduce a new, not mapped property:

...
    [NotMapped]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime GeburtsdatumChromeEdit
    {
        get { return this.Geburtsdatum; }
        set { this.Geburtsdatum = value; }
    }
...

This is necessary to add the dataannotiation DisplayFormat with the format Chrome wants. It pipes the value to the original property.

In the view I doubled the Input for the date and encapsulated the two groups by div's with special classes:

<div class="date4Normal">
        @*Tut nicht in Chrome, da dieser dann einen Input vom Type "Date" verwendet und dieser verlangt dann ein Normdatum yyyy-mm-dd*@
        @Html.EditorFor(model => model.Geburtsdatum)
        @Html.ValidationMessageFor(m => m.Geburtsdatum, String.Empty, new {@class = "text-danger"})
    </div>
    <div class="date4Chrome">
        @Html.EditorFor(model => model.GeburtsdatumChromeEdit)
        @Html.ValidationMessageFor(m => m.GeburtsdatumChromeEdit, String.Empty, new { @class = "text-danger" })
        @*@Html.TextBoxFor(model => model.Geburtsdatum, "{0:dd.MM.yyyy}")
        @Html.ValidationMessageFor(m => m.Geburtsdatum, String.Empty, new { @class = "text-danger" })*@
    </div>

With a function I found on stackoverflow (How can I tell if a browser supports <input type='date'>) I can detect if the actual browser uses date-input:

 function checkDateInput() {
        var input = document.createElement('input');
        input.setAttribute('type', 'date');

        var notADateValue = 'not-a-date';
        input.setAttribute('value', notADateValue);

        return (input.value !== notADateValue);
    }

With the next function I remove the input-blocks I do not need:

 function switchForChrome() {
        var isChrome = checkDateInput();
        if (isChrome) {
            $('.date4Normal').remove();
        } else {
            $('.date4Chrome').remove();
        }
    };

In the $(document).ready function I call the switchForChrome();.

At this point it seems to work, but the validation of the date allways failed.

So I add some code to work around (ASP.NET MVC 4 avoid generation of data-val-date for datetime):

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

And finally it works. For display I use the original property (Geburtsdatum) so I get the language-specific format and for edit either the original property (IE, Firefox) or the new property GeburtsdatumChromeEdit (Chrome, Opera).

Upvotes: 0

Related Questions