How to use the datetime picker with diferent localizations

[Guillermo Goberna]

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.

https://ej2.syncfusion.com/aspnetmvc/documentation/common/internationalization/

[Christopher Issac Sunder K]

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.  

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/DateTimePicker_locale-1866846818  

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_directory\node_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.  

[index.cshtml] 

<div id="wrapeer"> 

    <h4>DateTimePicker</h4> 

    @Html.EJS().DateTimePicker("datetimepicker").Width("250px").Render() 

</div> 

 

<script> 

    document.addEventListener('DOMContentLoaded', function () { 

        datetimepicker = document.getElementById('datetimepicker').ej2_instances[0]; 

        var L10n = ej.base.L10n; 

        L10n.load({ 

            'es': { 

                'datetimepicker': { 

                    placeholder: "Elige una fecha y hora", 

                    today: "Hoy" 

                } 

            } 

        });                           

        loadCultureFiles('es'); 

        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; 

            }; 

            ajax.send(); 

            loader(JSON.parse(val)); 

        }; 

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

            loadCulture(prop); 

        } 

    } 

 

</script> 

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

Thanks, 

Christo