Globalization not working with clrd data

[Viktor Kukurudziak]

I try to set polish culture for DatePicker as it shown in example, but it resulted in console error.

calendar.js:263 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at DatePicker.CalendarBase.getCultureValues (calendar.js:263)
    at DatePicker.CalendarBase.createContentHeader (calendar.js:296)
    at DatePicker.CalendarBase.createContent (calendar.js:248)
    at DatePicker.Calendar.createContent (calendar.js:1943)
    at DatePicker.CalendarBase.render (calendar.js:152)
    at DatePicker.Calendar.render (calendar.js:1852)
    at DatePicker.disabledDates (datepicker.js:1255)
    at DatePicker.updateInput (datepicker.js:196)
    at DatePicker.initialize (datepicker.js:142)

As far as i can tell there is default property in crlObj and than there is main etc. But your locking for main property in root object which is not there.
You can find test project attached.

All you need to do is to try to set some date with date picker and you will see an error

Attachment: datepickertest_64b58d13.zip

[Ashokkumar Balasubramanian]

Hi Viktor Kukurudziak, 

 

Good day to you. 

 

We have checked with the provided sample and issue details. We would like to inform you that, reported issue caused due to culture files are not loaded in your application. So, we suggest you install the JSON loader by using the “npm install --save-dev json-loader” command as per the below link to load the required culture JSON files. 

  

Link: https://www.npmjs.com/package/json-loader  

  

And then, we suggest you using loadCldr method to load the culture files as mentioned in the below UG documentation link. 

  

UG Link: https://ej2.syncfusion.com/documentation/calendar/globalization/?no-cache=1  

  

Please refer the below code example. 

 

[App.vue] 

  

<template> 

    <div id="app"> 

        <img alt="Vue logo" src="./assets/logo.png"> 

        <HelloWorld msg="Welcome to Your Vue.js App" /> 

    </div> 

</template> 

  

<script> 

import Vue from 'vue'; 

import { DatePickerPlugin } from '@syncfusion/ej2-vue-calendars'; 

import HelloWorld from './components/HelloWorld.vue' 

import { loadCldr, setCulture } from '@syncfusion/ej2-base'; 

Vue.use(DatePickerPlugin); 

  

loadCldr( 

    require('cldr-data/main/pl/ca-gregorian.json'), 

    require('cldr-data/main/pl/numbers.json'), 

    require('cldr-data/main/pl/timeZoneNames.json'), 

    require('cldr-data/supplemental/numberingSystems.json') 

    ); 

export default { 

  name: 'app', 

  components: { 

    HelloWorld 

  }, 

  

  mounted() { 

     setCulture('pl'); 

  } 

} 

</script> 

  

  

We have modified the provided sample and attached below. 

  

https://www.syncfusion.com/downloads/support/forum/145430/ze/date-picker-test-150358817  

 

Please check the sample and get back to us, if you require any further assistance on this. 

 

Regards, 

Ashokkumar B.