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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Uncaught TypeError with datepicker localization

Thread ID:

Created:

Updated:

Platform:

Replies:

149232 Nov 19,2019 05:10 PM UTC May 28,2020 08:13 AM UTC React - EJ 2 5
loading
Tags: DatePicker
Roman Buhtiyarov
Asked On November 19, 2019 05:10 PM UTC

Hi,

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

Saranya Dhayalan [Syncfusion]
Replied On 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.  
 
   
Regards,  
Saranya D 


Roman Buhtiyarov
Replied On 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?

Sureshkumar P [Syncfusion]
Replied On 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; 
 
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
Replied On 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. 

Sureshkumar P [Syncfusion]
Replied On 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.  
 
Regards, 
Sureshkumar P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon