Globalize - datetime does not work with pt-BR

Question

Globalize - datetime does not work with pt-BR

Navigation

#1 by (3 votes)

1

Please, follow 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 enter 12/08/2017 it works ok. Now if I type after the 12th, that is, 8/13/2017. show red warning. It looks like it's inverted, American standard. I can not set Brazilian standard.

What am I doing wrong?

javascript datetime asp.net-mvc-5

asked by anonymous 09.08.2017 / 03:46

1 answer

Query query - SQL Server 2012 Minimize .JS and CSS files in bulk

score 3 · Accepted Answer

TUTORIAL: HOW TO CONFIGURE GLOBALIZE ON YOUR VS2017 PROJECT

I'm going to do a little tutorial here, because it was very complicated to make it work:

Official site globalize: link

First you should install jQuery.Validation.Globalize in your project, inside it:

cldrjs

jquery-globalize

jQuery.Validation.Globalize

Onceyou'vedonethis,youneedtodownloadonemorething:CLDR,becauseGlobalizeusesCLDR,thelargestandmostextensivedefaultrepositoryoflocaledata.

Whenyouinstalljquery-globalize,theCLDRpartofyourprojectdoesnotcome.Youneedtodothismanually.Here'shisdocumentation:

WedoNOTembedanyi18ndatawithinourlibrary.However,wemakeit reallyeasytouse.ReadHowtogetandloadCLDRJSONdataformore informationonitsusage.

Thenyouneedtousethiscommand:

bowerinstallcldr-data

Thisfilehas242MB!!!Ithasalllanguage.Thatdone,let'ssetthedatetopt-BR.

InyourView,addasmalljavascriptcode:

<!--CLDR--><scriptsrc="~/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 deducing this from yourself, use this online tool . The tool allows you to select the modules you want to use and tells you the Globalize and the JDRON CLDR files you need. In my case it's just date:

Done this, just test the date field !!! I hope this helps others. Feel free to edit my answer if you'd like to improve.

NOTE: You do not need to configure anything in the web.config file.