setCulture causes error when using dateTimePicker | Angular

Question

Hi, I'm trying to get localization to work for ejs grid datetimepickeredit.

I get the error: Cannot convert undefined or null to object node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.getCultureValues

import { setCulture, loadCldr } from '@syncfusion/ej2-base';

loadCldr(
  require('cldr-data/main/en-ZA/numbers.json'),
  require('cldr-data/main/en-ZA/currencies.json'),
  require('cldr-data/supplemental/numberingSystems.json'),
  require('cldr-data/supplemental/currencyData.json'),
);

constructor() {
    setCulture('ZA');
}

I've tried the solutions from here: https://www.syncfusion.com/forums/138479/cannot-convert-undefined-or-null-to-object-at-function-keys but did not help.
Please assist

Sevvandhi Nagulan · Answer

Hi Ervin, 

Greetings from Syncfusion support. 

We have checked the reported requirement.  The cause of the issue there is no culture file with the mentioned name in the cldr data. To get rid of the reported issue change ZA to en-ZA. Kindly refer the below code, 





constructor() { 
setCulture('en-ZA'); 
} 


If still issue persists, kindly share the whether you are facing the issue while rendering the DatePicker inside the grid or in the individual component? 

Regards, 
Sevvandhi N

Ervin van der Merwe · Answer

Hi, thanks for the reply. Unfortunately the issue persists with the error: 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

The control is in the grid as editType='datetimepickeredit'

Any Ideas?

Thanks!

Gokul Ramalingam · Answer

Hi Ervin, We suspect the problem might be occurring due to the locale property not set properly or the locale files not loaded in the application correctly. We have demonstrated this below where the Grid has Inline edit and DateTimePicker edit for one of the fields and the locale is set as 'en-ZA'. We have also modified the default text for some of them in the L10n.load function to reflect on the Grid. Please refer to the below code snippet and sample link for more information. [app.component.ts]

[app.component.ts] import { setCulture, loadCldr, L10n } from '@syncfusion/ej2-base'; declare let require: any; setCulture('en-ZA'); // Set the culture L10n.load({ 'en-ZA': { 'grid': { "Add": " Add New Record", // You can change the Locale words here "Edit": "Edit Record", "Cancel": "Cancel Operation", "Update": "Update Record", "Delete": "Remove Record", }, "datetimepicker": { "today": "Todays Date", "placeholder": " Enter a Date" } } }); constructor() { loadCldr( require('node_modules/cldr-data/main/en-ZA/ca-gregorian.json'), // Import the required files require('node_modules/cldr-data/main/en-ZA/numbers.json'), require('node_modules/cldr-data/main/en-ZA/timeZoneNames.json'), require('node_modules/cldr-data/supplemental/numberingSystems.json'), require('node_modules/cldr-data/supplemental/currencyData.json'), ); } Sample link: https://www.syncfusion.com/downloads/support/forum/152112/ze/DateTimePicker1650090760.zip Documentation Link: https://ej2.syncfusion.com/angular/documentation/common/localization/ https://ej2.syncfusion.com/angular/documentation/grid/global-local/?no-cache=1 Please get back to us if you need further assistance. Regards, Gokul R

Ervin van der Merwe · Answer

Thanks for the reply.It is working now

Prasanna Kumar Viswanathan · Answer

Hi Ervin, 
 
We are happy to hear that the provided solution has been working fine at your end. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V