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

DateTimePicker Globalization - Example not working (TypeError)

Thread ID:

Created:

Updated:

Platform:

Replies:

146524 Aug 5,2019 08:19 AM UTC Aug 10,2020 12:23 PM UTC Vue 9
loading
Tags: DatePicker
Politzki Oliver
Asked On August 5, 2019 08:19 AM UTC

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
Replied On August 5, 2019 10:22 AM UTC

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
Replied On August 5, 2019 12:39 PM UTC

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


Ashokkumar Balasubramanian [Syncfusion]
Replied On August 8, 2019 11:20 AM UTC

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
Replied On August 26, 2019 10:16 AM UTC

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 [Syncfusion]
Replied On August 27, 2019 09:53 AM UTC

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
Replied On December 12, 2019 09:03 PM UTC

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 [Syncfusion]
Replied On December 13, 2019 10:01 AM UTC

Hi Politzki, 
 
Thanks for your valuable information. 
 
We will consider and include this information in our documentation globalization section.  
 
Regards, 
Sureshkumar P 


eva
Replied On August 7, 2020 09:37 AM UTC

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 [Syncfusion]
Replied On August 10, 2020 12:23 PM UTC

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. 
 
 
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