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. Image for the cookie policy date

How to use the datetime picker with diferent localizations

I want to use the spanish date format, but I'm not able to do it,.

Also, I can not intall the npm package, following the documentation provided.


1 Reply

CI Christopher Issac Sunder K Syncfusion Team February 14, 2019 02:43 AM UTC

Hi Guillermo, 

Thank you for contacting Syncfusion support. 

We have prepared the sample based on your requirement (“to use the spanish date format for DateTimePicker”) and attached the sample below. Please follow the below mentioned steps to load the Spanish culture for the DateTimePicker component.  

Step 1: 
Please create the ASP.NET MVC application as like in this documentation.  

Step 2: 
Initialize the DateTimePicker component as per this getting started documentation
Step 3: 
To load the Spanish culture (other than English), need to install the CLDR-data using the below command in your application root directory. To know more about globalization please refer the documentation link.  

npm install cldr-data --save 

Step 4: 
Once the package installed, you can find the culture specific JSON data under the location “root_directoryode_modules\cldr-data”. Then, manually copy the CLDR-Data  folder from the node_modules folder and place inside the scripts folder and refer from the “\scripts\cldr-data” location. 

Step 5: 
Please refer the below code example for load the Spanish culture for the DateTimePicker component.  


<div id="wrapeer"> 
    document.addEventListener('DOMContentLoaded', function () { 
        datetimepicker = document.getElementById('datetimepicker').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
            'es': { 
                'datetimepicker': { 
                    placeholder: "Elige una fecha y hora", 
                    today: "Hoy" 
        datetimepicker.locale = 'es'; 
    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(location.origin + location.pathname + '/../../Scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            ajax.onSuccess = function (value) { 
                val = value; 
        for (var prop = 0; prop < files.length; prop++) { 

If still issue persists, please get back to us with issue reproducing sample or screenshots that will help us to resolve the issue earliest. 


Live Chat Icon For mobile
Up arrow icon