Uncaught TypeError with datepicker localization

[Roman Buhtiyarov]

Hi,

I'm facing an issue with datepicker localization. 

I followed this tutorial:

https://ej2.syncfusion.com/react/documentation/datepicker/globalization/

And when I click the calendar button, I face below errors:

calendar.js:362 Uncaught TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at DatePickerComponent.CalendarBase.getCultureValues (calendar.js:362)

    at DatePickerComponent.CalendarBase.createContentHeader (calendar.js:409)

    at DatePickerComponent.CalendarBase.createContent (calendar.js:343)

    at DatePickerComponent.Calendar.createContent (calendar.js:2538)

    at DatePickerComponent.CalendarBase.render (calendar.js:190)

    at DatePickerComponent.Calendar.render (calendar.js:2384)

    at DatePickerComponent.DatePicker.show (datepicker.js:1325)

    at DatePickerComponent.DatePicker.dateIconHandler (datepicker.js:655)

I'm attaching the demo project I tried for you to reproduce the issue. Thank you for your help.

Attachment: datepicker_5ebb83db.zip

[Saranya Dhayalan]

Hi Roman,  

   

Thanks for contacting Syncfusion support.  

   

We have checked your reported issue and we suspect the cause of the issue is “de” culture CLDR-Data is not loaded correctly in your application. So, please ensure all locale related files are referred and loaded correctly in your application to get rid of the reported issue.  

  

npm install cldr-data --save 

   

For your convenience, we have prepared the sample based on your requirement. Please get the sample from the below location.  

 

Sample Link:   https://www.syncfusion.com/downloads/support/forum/149232/ze/sample-2098784941 

 

 

To know more about Globalization in DatePicker component please refer the below UG Documentation link.  

 

UG Link: https://ej2.syncfusion.com/react/documentation/datepicker/globalization/ 

   

Regards,  

Saranya D 

[Roman Buhtiyarov]

Thank you for your help. I think there is a problem with a configuration of project.

I created project with "create-react-app projectname --typescript" which is recommended way by create-react-app but the issue is happening there. If I create project by "create-react-app projectname --scripts-version=react-scripts-ts", the localization works.

I know it's because CLDR data is not loaded correctly, but I hope to make it work on the current project which is created by first way. Is there any way to do this?

[Sureshkumar P]

Hi Roman, 

 

We have validated your requirement. We created react application by using “create-react-app projectname --typescript” command. Here we are not able to config the json file using tslint.json file. So, we suggest using require method to get rid of your facing issue. 

 

Kindly refer the code block. 

 

mport { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; 

import React from 'react'; 

import './App.css'; 

 

//Load the L10n from ej2-base 

import { L10n } from "@syncfusion/ej2-base"; 

import { loadCldr } from "@syncfusion/ej2-base"; 

 

declare var require: any; 

 

loadCldr( 

    require('cldr-data/main/de/ca-gregorian.json'), 

    require('cldr-data/main/de/numbers.json'), 

    require('cldr-data/main/de/timeZoneNames.json'), 

    require('cldr-data/supplemental/numberingSystems.json') 

    ); 

 

//load the locale object to set the localized placeholder value 

L10n.load({ 

  de: { 

      datepicker: { 

            placeholder: "Wählen Sie ein Datum", 

            today:"heute" 

        } 

    } 

}); 

const App: React.FC = () => { 

  return <DatePickerComponent id="datepicker" locale='de'/>; 

} 

 

export default App; 

 

 

 

 

We created a sample based on your requirement. Please refer the sample here: https://www.syncfusion.com/downloads/support/forum/149232/ze/DatePickerGlobalize-1696156895  

 

Regards, 

Sureshkumar P 

[Jan Paholik]

I had the same problem as was described here but nothing from the mentioned ideas did not work. Finally I came to updating JS dependencies and that helped. So maybe it is the thing to start with - make sure that external libraries you use are up to date. 

[Sureshkumar P]

Hi Jan, 

 

Thanks for your update.  

 

We would like to say this, we have supported the latest versions of our third-party library support.  

 

Regards, 

Sureshkumar P