Search results

Globalization

Globalization is the combination of adapting the control to various languages by means of parsing and formatting the date or number Internationalization and also by adding cultural specific customizations and translating the text localization.

By default, DateRangePicker date format, week, and month names are specific to the American English culture. It utilizes the Blazor Internationalization package to parse and format the date object based on the culture by using the official UNICODE CLDR JSON data. It provides the loadCldr method to load culture specific CLDR JSON data.

To go with the different culture other than English, follow the below steps:

Load CLDR-Data to the application

  • Open Command Prompt in your machine.

  • Run the following command in Command Prompt.

cd /d 'Folder path of your Blazor application'

For example : cd /d  E:\Blazor\WebApplication
  • Make sure that you have installed Node and NPM in your machine before installing the CLDR-Data.

  • To check if you have Node, run this command in your Command Prompt.

node -v
  • If Node is not installed, then you can download and install the Node from this location.

  • To confirm if you have NPM, run this command in your Command Prompt.

npm -v
  • Install the CLDR-Data package by using the following command (it installs the CLDR JSON data). To learn more about CLDR-Data, refer to CLDR-Data.
npm install cldr-data --save
  • After installing the package, you can find the culture specific JSON data under the location \node_modules\cldr-data. Then, copy the cldr-data folder into wwwroot folder.

  • Download the required locale packages to render the Blazor Calendar component with specified locale.

  • To download the locale definition of Blazor components, use this link.

  • After downloading the ej2-locale package, copy the ej2-locale folder with required local definition file into wwwroot folder.

  • By default, the ej2-locale package contains the localized text for static text present in components like button text, placeholder, tooltip, and more.

@using Syncfusion.EJ2.Blazor.Calendars

<EjsDateRangePicker></EjsDateRangePicker>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/de.json").SetCulture("de").LoadCldrData(new string[] { "wwwroot/cldr-data/main/de/ca-gregorian.json", "wwwroot/cldr-data/main/de/timeZoneNames.json", "wwwroot/cldr-data/main/de/numbers.json" });
    }
}

The output will be as follows.

DateRangePicker

Customize the localized text

You can change the localized text of particular component by editing the wwwroot/ej2-locale/src/{{locale name}}.json file.

[wwwroot/ej2-locale/src/de.json]

{
  "de": {
    "daterangepicker": {
        "placeholder": "Wählen Sie einen Bereich aus",
        "startLabel": "Wählen Sie Startdatum",
        "endLabel": "Wählen Sie Enddatum",
        "applyText": "Sich bewerben",
        "cancelText": "Stornieren",
        "selectedDays": "Ausgewählte Tage",
        "days": "Tage",
        "customRange": "benutzerdefinierten Bereich"
    }
  }
}

The output will be as follows.

DateRangePicker

Right-To-Left

The DateRangePicker supports RTL (right-to-left) functionality for languages like Hebrew and Hebrew to displays the text in the right-to-left direction. Use EnableRtl property to set the RTL direction.

The following code example initialize the DateRangePicker component in Hebrew culture.

@using Syncfusion.EJ2.Blazor.Calendars

<EjsDateRangePicker EnableRtl=true></EjsDateRangePicker>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/he.json").SetCulture("he").LoadCldrData(new string[] { "wwwroot/cldr-data/main/he/ca-gregorian.json", "wwwroot/cldr-data/main/he/timeZoneNames.json", "wwwroot/cldr-data/main/he/numbers.json", "wwwroot/cldr-data/supplemental/numberingSystems.json"});
    }
}

The output will be as follows.

DateRangePicker