Calendar.js error

Question

Good morning, we are performing the integration of the datetimepicker component in net core 3.1, but by implementing the object we are having problems with the Calendar.js library.

The code is :

<ejs-datetimepicker id="datetimepicker" value="@Model.FechaDelCambio" asp-for="FechaDelCambio" placeholder="Select a date and time"></ejs-datetimepicker>

And error console:

calendar.js:275 Uncaught TypeError: Cannot convert undefined or null to object

at Function.keys (<anonymous>)

at t.getCultureValues (calendar.js:275)

at t.createContentHeader (calendar.js:308)

at t.createContent (calendar.js:259)

at t.createContent (calendar.js:2001)

at t.render (calendar.js:155)

at t.render (calendar.js:1905)

at t.disabledDates (datepicker.js:1381)

at t.updateInput (datepicker.js:196)

at t.initialize (datepicker.js:142)

Sevvandhi Nagulan · Answer

Hi Diego, 

Greetings from Syncfusion support. 

We would like to let you know that if the CLDR-data for the corresponding culture not loaded in your application. So, please ensure that whether the culture file for corresponding culture is correctly loaded in your application either using the locale or setCulture() method as mentioned below, 






document.addEventListener('DOMContentLoaded', function () { 
        datetimepicker = document.getElementById('datetimepicker').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'de': { 
                'datetimepicker': { 
                    placeholder: 'Wählen Sie ein Datum und eine Uhrzeit aus', 
                    today: 'heute' 
                } 
            } 
        }); 
        loadCultureFiles('de'); 
        datetimepicker.locale = 'de';  
        ej.base.setCulture('de');  
    });  

Please find the sample below, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-1538539782 

Still, the issue persists, please revert us with issue reproducing sample that will help us to check and provide the exact solution at our end. 

Regards, 
Sevvandhi N

diego · Answer

I have installed the module through node, but I have the same problem, I don't access the files correctly, trying to get it through ajax

Sevvandhi Nagulan · Answer

Hi Diego,  

Make sure that you have manually copy the CLDR-Data from the node_modules folder and place inside the wwwroot folder and refer from the \wwwroot \cldr-data location as like the below code examples,  
 




var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];  
        if (name === 'ar') {  
            files.push('numberingSystems.json');  
        }  
        var loader = ej.base.loadCldr;  
        var loadCulture = function (prop) {  
            var val, ajax;  
            if (name === 'ar' && prop === files.length - 1) {  
                ajax = new ej.base.Ajax(location.origin + location.pathname +'/../../cldr-data/supplemental/' + files[prop], 'GET', false);  
            } else {  
                ajax = new ej.base.Ajax(location.origin + location.pathname +'/../../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);  
        }  
 
If still issue persists, Kindly share the issue reproducing sample or localization referred path and cldr loaded location or code snippet. It will help us to proceed further.  

Regards,  
Sevvandhi N