DateTimePicker Globalization - Example not working (TypeError)

[Politzki Oliver]

Hello!

I'm new to vue.js and tried the globalization demo from https://ej2.syncfusion.com/vue/documentation/datetimepicker/globalization/

For that I've created a new vue-project with Intellij Idea, copy-pasted the code one-to-one from the source at the bottom of the page and "yarn add"ed / "yarn install"ed all the dependencies.

If I start the app with "yarn serve" I can see the datetimepicker with its icons and textbox and the localized placeholder-text "Wählen Sie Datum und Uhrzeit". But if I click on the calendar-icon I get the following error in the browser console:

TypeError: can't convert undefined to object app.js line 1344 > eval:279:38

    getCultureValues calendar.js:275

    createContentHeader calendar.js:308

    createContent calendar.js:259

    createContent calendar.js:1995

    render calendar.js:155

    render calendar.js:1904

    show datepicker.js:942

    show datetimepicker.js:429

    dateIconHandler datepicker.js:457

    <anonym> self-hosted:1003

When I click the time-icon, I get the following error:

uncaught exception: Format options or type given must be invalid
throwError@webpack-internal:///./node_modules/@syncfusion/ej2-base/src/util.js:312:15
DateFormat.dateFormat@webpack-internal:///./node_modules/@syncfusion/ej2-base/src/intl/date-formatter.js:63:69
Internationalization.prototype.getDateFormat@webpack-internal:///./node_modules/@syncfusion/ej2-base/src/internationalization.js:100:80
Internationalization.prototype.formatDate@webpack-internal:///./node_modules/@syncfusion/ej2-base/src/internationalization.js:145:21
createListItems@webpack-internal:///./node_modules/@syncfusion/ej2-calendars/src/timepicker/timepicker.js:81:38
DateTimePicker.prototype.listCreation@webpack-internal:///./node_modules/@syncfusion/ej2-calendars/src/datetimepicker/datetimepicker.js:475:97
DateTimePicker.prototype.popupCreation@webpack-internal:///./node_modules/@syncfusion/ej2-calendars/src/datetimepicker/datetimepicker.js:505:26
DateTimePicker.prototype.timeHandler@webpack-internal:///./node_modules/@syncfusion/ej2-calendars/src/datetimepicker/datetimepicker.js:404:22
util.js:290
    throwError util.js:290
    dateFormat date-formatter.js:55
    getDateFormat internationalization.js:79
    formatDate internationalization.js:124
    createListItems timepicker.js:74
    listCreation datetimepicker.js:467
    popupCreation datetimepicker.js:497
    timeHandler datetimepicker.js:396
    <anonym> self-hosted:1003

When I use locale="en" it works.

Thanks and best regards,

Oliver

[Politzki Oliver]

I've found the solution with the help of a colleague.

I've changed the imports from:

import * as numberingSystems from './numberingSystems.json';
import * as gregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';

to:

import numberingSystems from './numberingSystems.json';
import gregorian from './ca-gregorian.json';
import numbers from './numbers.json';
import timeZoneNames from './timeZoneNames.json';

I'm not 100% sure why it's working now, though :D

[Politzki Oliver]

On further investigation, it seems that the "cldrData"-Object in calendar.js - CalendarBase.prototype.getCultureValues - function is undefined...

[Ashokkumar Balasubramanian]

Hi Politzki Oliver, 

 

Sorry for the delay. 

 

We were able to replicate your mentioned scenario while using Vue-CLI 3 application. If you are using Vue-cli 3 application, we don’t need to specify the * for loading json file (as like your current code block). We missed to specify this information in our Vue documentation. So, we will add and update the documentation changes on Vol 3,2019 release. 

 

Also, if you are using other than Vue cli 3 application, you can specify * for loading json (as like your previous code block) file in your application. 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Politzki Oliver]

Hello!

I've updated several syncfusion packages to the newest version (17.2.46) and this, in combination with the import without '*' seemed to fix it.

Thanks!

[Ashokkumar Balasubramanian]

Hi Politzki Oliver, 

 

As mentioned earlier, if you are using Vue-cli 3 application (not based on Syncfusion versions), we don’t need to specify the * for loading json file. Also, we will add this information in our documentation on Vol 3,2019 release, which is expected to be rolled out on end of Sep 2019. Please be patience. 

 

Regards, 

Ashokkumar B. 

[Gerhard Wagner]

This also seems to be in Ionic with Angular 8!

I know it is the wrong Thread, but only to mention for the documentation!

Thanks a lot for the hint, it costed me days!

Regards,
Gerhard

[Sureshkumar P]

Hi Politzki, 

 

Thanks for your valuable information. 

 

We will consider and include this information in our documentation globalization section.  

 

Regards, 

Sureshkumar P 

[eva]

Hi Politzki, 

 

Thanks for your valuable information. 

 

We will consider and include this information in our documentation globalization section.  

 

Regards, 

Sureshkumar P 

Hi there, 

I have the same problem and I´ve tried the solution suggested but it doen´t work for me.

I´ve changed the imports, 

import numberingSystems from 'cldr-data/supplemental/numberingSystems.json'

import gregorian from 'cldr-data/main/es/ca-gregorian.json'

import numbers from 'cldr-data/main/es/numbers.json'

import timeZoneNames from 'cldr-data/main/es/timeZoneNames.json'

I´ve installed json loader, my vue-cli is 3.11, vue version is 2.6.10. 

Please, can you help me?, I´ve spent two days long and I am not able to find a solution.

Thanks in advance

[Sureshkumar P]

Hi Eva, 

 

We have prepared the sample with the provided code, Vue-cli and Vue version and attached it below. Also, we suggest you to ensure that CLDR-data files are properly added in your application. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRangePicker_globalization_vuecli3_(2)-1312841194   

 

Regards, 

Sureshkumar P