We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Uncaught TypeError with datepicker localization


I'm facing an issue with datepicker localization. 
I followed this tutorial:

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

5 Replies

SD Saranya Dhayalan Syncfusion Team November 20, 2019 02:08 PM UTC

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.  
To know more about Globalization in DatePicker component please refer the below UG Documentation link.  
Saranya D 

RB Roman Buhtiyarov November 21, 2019 06:21 PM UTC

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?

SP Sureshkumar P Syncfusion Team November 22, 2019 11:09 AM UTC

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; 
//load the locale object to set the localized placeholder value 
  de: { 
      datepicker: { 
            placeholder: "Wählen Sie ein Datum", 
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  
Sureshkumar P 

JP Jan Paholik May 28, 2020 06:59 AM UTC

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. 

SP Sureshkumar P Syncfusion Team May 28, 2020 08:13 AM UTC

Hi Jan, 
Thanks for your update.  
We would like to say this, we have supported the latest versions of our third-party library support.  
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon