locale=''ar" and Globalization

[hasnain]

i have some issue with datepicker components everything working fine with Globalization and cldr files loaded successfully .

                <ejs-datepicker  enableRtl="true"></ejs-datepicker>

 everything working fine but when i changed to below 

 <ejs-datepicker dayHeaderFormat='Narrow' format='yyyy/MM/dd'  placeholder="select date" calendarMode='Islamic' ></ejs-datepicker>

calendarMode to islamic it gives me error 

ERROR TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.getCultureValues (calendar.js:253)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContentHeader (calendar.js:286)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContent (calendar.js:238)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.Calendar.createContent (calendar.js:1906)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.render (calendar.js:150)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.Calendar.render (calendar.js:1816)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.show (datepicker.js:769)

    at DatePickerComponent.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.dateIconHandler (datepicker.js:359)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

i need to solve this issue kindly help .

[Ashokkumar Balasubramanian]

Hi Hasnain, 

 

Good day to you. 

 

We would like to inform you that, the reported issue caused due to load the “ca-gregorian.json“ file in the loadCldr method to load the culture files in Islamic mode. So, we suggest you to load the “ca-islamic.json“ file to load the required culture files while using Islamic service as mentioned in the below code example to resolve the issue at your end. 

 

loadCldr( 

  require("cldr-data/main/ar/numbers.json"), 

  require("cldr-data/main/ar/ca-islamic.json"), 

  require("cldr-data/supplemental/numberingSystems.json"), 

  require("cldr-data/main/ar/timeZoneNames.json") 

); 

 

Please find the sample from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/148109/ze/syncfusion-angular-datetimepicker_148109_islamic-1273489358 

 

Note: Also please inject the IslamicService in the app.module.ts file since it is injectable module.  

 

Please refer the above sample and get back to us if you need any further assistance on this.

Regards, 

Ashokkumar B.