Setting locale for SfDateRangePicker throws errors in console

[Admir Hodžic]

After upgrading to 18.1.0.36-beta version data DateRangePicker control with parameter local set throwing errors in console and not working.

My blazor server app loading Local Data in main layout when 

Triying to pickup date range on control browser conosle thronwing errors.

I think that Local Data is loaded correctly.

SfDatePicker with parameter  locale set is working whitout problems

In Main lout

     protected override async Task OnInitializedAsync()

        {

            await base.OnInitializedAsync();

            this.JsRuntime.Sf().LoadLocaleData("wwwroot/ej2-locale/src/hr.json").SetCulture("hr");

     }

On component:

<SfDatePicker @bind-Value="@NoviDatum" Locale="hr"></SfDatePicker>

<SfDateRangePicker Locale="hr" @bind-StartDate="@odDatuma"  @bind-EndDate="@doDatuma" ></SfDateRangePicker>

@code  {

    private DateTime? odDatuma { get; set; }

    private DateTime? doDatuma { get; set; }

    private DateTime? NoviDatum { get; set; }

}

In console

calendars-3452e3.min.js:1 Uncaught TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at l.i.getCultureValues (calendars-3452e3.min.js:1)

    at l.i.createContentHeader (calendars-3452e3.min.js:1)

    at l.i.createContent (calendars-3452e3.min.js:1)

    at l.renderCalendar (calendars-3452e3.min.js:1)

    at l.createCalendar (calendars-3452e3.min.js:1)

    at l.createControl (calendars-3452e3.min.js:1)

    at l.renderControl (calendars-3452e3.min.js:1)

    at l.createPopup (calendars-3452e3.min.js:1)

    at l.show (calendars-3452e3.min.js:1)

[Sevvandhi Nagulan]

Hi Admir, 

Greetings from Syncfusion support. 

The cause of the issue is you did not referred the corresponding culture definition from the cldr data. Also, if you used the setCulture method, then there is no need to use the locale property for all the components. The culture will be applied to all the components in the page. We can load the culture in the onAfterRender method as mentioned above code example. Kindly refer the below code example, 

<SfDatePicker @bind-Value="@NoviDatum"></SfDatePicker> 

<SfDateRangePicker @bind-StartDate="@odDatuma" @bind-EndDate="@doDatuma"></SfDateRangePicker> 

 

@code  { 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

    private DateTime? odDatuma { get; set; } 

    private DateTime? doDatuma { get; set; } 

    private DateTime? NoviDatum { get; set; } 

 

    protected override void OnAfterRender(bool firstRender) 

    { 

        this.JsRuntime.Sf().LoadLocaleData("wwwroot/ej2-locale/src/hr.json").SetCulture("hr").LoadCldrData(new string[] { "wwwroot/cldr-data/main/hr/ca-gregorian.json", "wwwroot/cldr-data/main/hr/timeZoneNames.json", "wwwroot/cldr-data/main/hr/numbers.json" }); 

    } 

} 

Regards, 

Sevvandhi N 

[Admir Hodžic]

Thank you on helping,

It is working when LoadLocalData is called in  OnAfterRender method.

Apologies for opening post, in earlier versions of components, it was working in OnInitializedAsync, 

[Sevvandhi Nagulan]

Hi Admir, 

We are working on the localization improvements and it will be available with our Volume 1, 2020 release. We request you to load the locale files in “OnAfterRender” event until then.  

Regards, 

Sevvandhi N