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.
|
[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
