MVC 5 - can not get globalisation running

Question

I want to add globalization because the site asks the user for a date. And my german user want to type \"31.12.1966\" and not \"1966-12-31\".

So I add the nuget-Packages

Answer 1

I solved it this way:

In my view is the following script block:

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>

<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/currency.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/globalize/plural.js"></script>
<script src="~/Scripts/globalize/relative-time.js"></script>
<script src="~/Scripts/globalize/unit.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>


<script>
    $(document).ready(function () {
        // Use $.getJSON instead of $.get if your server is not configured to return the
        // right MIME type for .json files.
        $.when(
            $.get("/Scripts/cldr/main/de/ca-gregorian.json"),
            $.get("/Scripts/cldr/main/de/numbers.json"),
            $.get("/Scripts/cldr/supplemental/likelySubtags.json"),
            $.get("/Scripts/cldr/supplemental/timeData.json"),
            $.get("/Scripts/cldr/supplemental/weekData.json")
        ).then(function () {
            // Normalize $.get results, we only need the JSON, not the request statuses.
            return [].slice.apply(arguments, [0]).map(function (result) {
                return result[0];
            });
        }).then(Globalize.load)
    .then(function () {
        Globalize.locale("de-DE");
    });
    });

My data-class has an annotiation like this:

...
[Required]
    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
    public DateTime Geburtsdatum { get; set; }
...

And - very important!! - you must get the data-files! This is nessecary because the clrd-data is not part of the NuGet-Packages "jQuery.Validation.Globalize" / "jquery-globalize". (Yes, it is mentioned on the Project-page - but I didn't see it... :-( )

I installed Bower (per NuGet) and installed then via Bower the Cldr-data. Example:

 bower install cldr-dates-full

(see overview over packages and install instruction 1)

Then I moved the needed json-files (here you find an online-tool for file-selection 2) from Directory "bower_components" to "scripts\cldr\main\de" respectively "scripts\cldr\supplemental".

I add them to the project and mark them as "Content", "no copy".

So finally it works!!! :-)

If I manage it to bundle the js- and json-files, I will update the answer.