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

Subscribe to this post

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/

Reply | Reply with quote

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.

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]

<h4>DateTimePicker</h4>

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

</div>

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

Reply | Reply with quote

How to use the datetime picker with diferent localizations

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US