Uncaught TypeError with datepicker localization

Roman Buhtiyarov

Asked On November 19, 2019 05:10 PM UTC

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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?

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US