Locale error error in ej2(es5)

[jeongkyu park]

Hello.

I'm currently migrating from EJ1 to EJ2.

When using EJ2's DateTimeRangePicker, to change the locale information to Korean, refer to https://github.com/syncfusion/ej2-locale and proceed with the contents of the attached file.

The attached file was created to show in the forums, and when I try to change the date in DateRangePicker on my current website in Chrome Developer Tools, I get the following error:

---------------------------------------------------------------------------------------------------------------------

Uncaught TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at t.getCultureValues (ej2.min.js:1)

    at t.createContentHeader (ej2.min.js:1)

    at t.createContent (ej2.min.js:1)

    at t.renderCalendar (ej2.min.js:1)

    at t.createCalendar (ej2.min.js:1)

    at t.createControl (ej2.min.js:1)

    at t.renderControl (ej2.min.js:1)

    at t.createPopup (ej2.min.js:1)

    at t.show (ej2.min.js:1)

---------------------------------------------------------------------------------------------------------------------

In the attached example, instead of 'ej2.min.js' file, 'constants.js' file error appears and the error contents are the same.

Please let me know if there is anything wrong with my example

Attachment: EJ2Lang_2e816f36.zip

[Sevvandhi Nagulan]

Hi Jeongkyu, 

Greetings from Syncfusion support.  

While checked the provided sample, you have set the culture for the DateRangePicker using setCulture() method but the culture files for the locale “ko” is not loaded in your application. So, the reported issue is caused. So, we suggest you to install the CLDR-data files using “npm install cldr-data --save” and paste the CLDR-data folder in the application root directory. Here, we have pasted the CLDR-data inside the resources folder under the root directory.  

Please refer the instructions in the below documentation link. 

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

function loadCultureFiles(name) { 

                var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 

                var loader = ej.base.loadCldr; 

                var loadCulture = function (prop) { 

                    var val, ajax; 

                    ajax = new ej.base.Ajax('resources/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

                    ajax.onSuccess = function (value) { 

                        val = value; 

                    }; 

                    ajax.send(); 

                    loader(JSON.parse(val)); 

                }; 

                for (var prop = 0; prop < files.length; prop++) { 

                    loadCulture(prop); 

                } 

            } 

 

 

Also, if you want to set the locale definition for the DateRangePicker component, you need to parse the ko.json file and pass in to the JSON success handler. Please refer the below code example. 

let ajax = new ej.base.Ajax('https://lbweb-cdn.azureedge.net/Scripts/SyncFusionEJ2/locale/ko.json', 'GET', false); 

        ajax.onSuccess = (value) => { 

            //Assigning locale text value for Essential JS 2 components 

            ej.base.L10n.load(JSON.parse(value)); 

        }; 

        ajax.send();  

 

 

Note: We need to run the JavaScript Globalization sample using IIS (Internet Information Services) to load the required culture files properly.  

Modified sample link: https://www.syncfusion.com/downloads/support/forum/152275/ze/DateRange_globalization_152275-1566993471  

Regards, 

Sevvandhi N