Globalization in Blazor DateRangePicker Component

7 Jul 20221 minute to read

Blazor DateRangePicker 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.

[wwwroot/blazor-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"
    }
  }
}

Customizing Localized Text in Blazor DateRangePicker

Right-To-Left

The DateRangePicker supports RTL (right-to-left) functionality for languages like Hebrew 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 DateRangePicker component in Hebrew culture.

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

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

@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 DateRangePicker with Hebrew Culture

You can refer to our Blazor Date Range Picker feature tour page for its groundbreaking feature representations. You can also explore our Blazor Date Range Picker example to understand how to present and manipulate data.