Globalize - datetime does not work with en

Question

Please follow the code:

Global.asax:

protected void Application_Start()
{
    System.Globalization.CultureInfo.DefaultThreadCurrentCulture = 
        new System.Globalization.CultureInfo("pt-BR");

    AreaRegistration.RegisterAllAreas();
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);    
}

Web.config:

  <system.web>    
    <globalization culture="pt-BR" uiCulture="pt-BR" />
  </system.web>

Model:

[DataType(DataType.Date)]
[Display(Name = "Data:")]
[AssertThat("DeadLine >= Today()", ErrorMessage = "* Data deverá ser superior a data de hoje")]
[Required(ErrorMessage = "* Campo Data é obrigatório")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? DeadLine { get; set; }

View:

@model Projeto.Models.Teste

@{
    ViewBag.Title = "Teste";
}

<h2>Teste</h2>

@using (Html.BeginForm("Home", "Index", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(model => model.DeadLine, "{0:dd/MM/yyyy}", new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.DeadLine, "", new { @class = "text-danger" })

    <input type="submit" value="Test" />
}



@section Scripts{
@Scripts.Render("~/bundles/jqueryval")

<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>

<script type="text/javascript">

// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
    $.when(
        $.get("/Scripts/cldr-data/supplemental/likelySubtags.json"),
        $.get("/Scripts/cldr-data/main/pt/numbers.json"),
        $.get("/Scripts/cldr-data/supplemental/numberingSystems.json"),
        $.get("/Scripts/cldr-data/main/pt/ca-gregorian.json"),
        $.get("/Scripts/cldr-data/main/pt/timeZoneNames.json"),
        $.get("/Scripts/cldr-data/supplemental/timeData.json"),
        $.get("/Scripts/cldr-data/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("pt");
            //Globalize.culture("pt-BR");

});

</script>

}

Final result:

If I type 12/08/2017 works ok. Now if I type after day 12, ie 13/08/2017. show red warning. Looks like it’s inverted, American standard. I can’t set Brazilian standard.

What am I doing wrong ?

Answer 1

TUTORIAL: HOW TO CONFIGURE GLOBALIZE IN YOUR PROJECT VS2017

I will make a small tutorial here, because it was very complicated to make it work:

Official website globalize: https://github.com/globalizejs/globalize

First you must install jQuery.Validation.Globalize in your project, within it, you have:

1. cldrjs
2. jquery-globalize
3. jQuery.Validation.Globalize

Done that, need to download one more thing: CLDR, for Globalize uses CLDR , the largest and most extensive standard repository of locality data.

When you install jquery-globalize, no part comes CLDR in your project. You need to do this manually. Here is documentation of it:

We do NOT embed any i18n data Within our library. However, we make it really easy to use. Read How to get and load CLDR JSON data for more information on its Usage.

Then you need to use run this command:

bower install cldr-data

This file is 242 MB !!! It has all the language. That done, let’s set the date to en-BR.

In your View, add a small javascript code:

<!--CLDR-->
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>

<!--Globalize-->
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>

<!--Validate-->
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>

<script type="text/javascript">

// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
    $.when(
        $.get("/Scripts/cldr-data/supplemental/likelySubtags.json"),
        $.get("/Scripts/cldr-data/main/pt/numbers.json"),
        $.get("/Scripts/cldr-data/supplemental/numberingSystems.json"),
        $.get("/Scripts/cldr-data/main/pt/ca-gregorian.json"),
        $.get("/Scripts/cldr-data/main/pt/timeZoneNames.json"),
        $.get("/Scripts/cldr-data/supplemental/timeData.json"),
        $.get("/Scripts/cldr-data/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("pt");
});

</script>

As an alternative to deduce this yourself, use this online tool. The tool allows you to select the modules you want to use and informs you the Globalize files and the JDRON CLDR you need. In my case it’s just date:

Done this, just test the data field !!! I hope this helps others. Feel free to edit my answer if you want to improve.

NOTE: No need to configure anything in the file web config..