Globalization in Blazor Datetime Picker Component

7 Jul 20221 minute to read

Blazor DateTimePicker component can be localized. Refer to Blazor Localization topic to localize Syncfusion Blazor components.

Customize the localized text

  • You can change the localized text of particular component by editing the wwwroot/blazor-locale/src/.json file.

  • In the following code, modified the localized text of today button and placeholder in de culture.

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

      {
      "de": {
          "datetimepicker": {
          "today": "Heutiges Datum",
          "placeholder": "Wählen Sie ein Datum und eine Uhrzeit aus"
          }
      }
      }

    Customizing Localized Text in Blazor DateTimePicker

Right-To-Left

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

The following code example initialize the DateTimePicker component in Arabic culture.

@using Syncfusion.Blazor.Calendars
@inject HttpClient Http;

<SfDateTimePicker TValue="DateTime?" Locale="ar" EnableRtl=true></SfDateTimePicker>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override async Task OnInitializedAsync()
    {
        this.JsRuntime.Sf().LoadLocaleData(await Http.GetJsonAsync<object>("blazor-locale/src/ar.json")).SetCulture("ar");
    }
}

Right to Left in Blazor DateTimePicker with Arabic Culture