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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use the datetime picker with diferent localizations

Thread ID:

Created:

Updated:

Platform:

Replies:

142636 Feb 13,2019 01:31 AM UTC Feb 14,2019 02:43 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: DateTimePicker
Guillermo Goberna
Asked On February 13, 2019 01:31 AM UTC

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 [Syncfusion]
Replied On 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_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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;