Open valerio-bozzolan opened 5 years ago
This may be a duplicate of #5905 . There also is an open PR #6078 .
@valerio-bozzolan
Here's a workaround if you don't want to edit the library, until the PR #6078 has been approved (if it's ever approved). The example is based on translating the datePicker to French. You simply need to adapt the shortWeekdays
, shortMonths
, and formattedDate
vars with what makes sense for you.
Hope it helps!
/**
*Initialize the datepickers
*/
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".material-datepicker");
var options = {
onSelect: localizeDateFormat,
onDraw: initDateFormat,
};
var instances = M.Datepicker.init(elems, options);
});
/**
* Fix the displayed date format when opening the calendar for the
* first time since there's no setting to do it otherwise.
*/
function initDateFormat( datePicker ) {
if ( typeof datePicker.date === 'undefined' ) {
var calendarDate = datePicker.dateTextEl.innerHTML + ' ' + datePicker.yearTextEl.innerHTML;
var newDate = new Date( calendarDate );
if ( typeof newDate === 'object' ) {
localizeDateFormat( newDate );
}
} else {
localizeDateFormat( datePicker.date );
}
}
/**
* Set the right short date format when displaying the calendar.
*/
function localizeDateFormat( selectedDate ) {
var shortWeekdays = [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ];
var shortMonths = [ 'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc' ];
var day = selectedDate.getDate();
var weekday = shortWeekdays[ selectedDate.getDay() ];
var month = shortMonths[ selectedDate.getMonth() ];
var formattedDate = weekday + ', ' + day + ' ' + month;
document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
}
Thanks @davelavoie for your amazing contribution! You saved me a lo of time ;)
For people in need of a DateTimePicker in spanish I configure mine using jquery and the following tweaks. You can swap the names of the days and months to german, Italian, etc
<div class="input-field col m6">
<input id="fechaIngreso" name="fechaIngreso" type="text">
<label for="fechaIngreso">Fecha y Hora de Ingreso</label>
</div>
// Initialize and set the datePicker
$('.datepicker').datepicker({
minDate: new Date('2000-01-01'),
maxDate: new Date(),
autoClose: true,
showClearBtn: 'true',
disableWeekends: true,
container: 'body',
firstDay: 0,
format: 'dd/mm/yyyy',
titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
i18n: {
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthsShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
weekdaysShort: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
weekdaysAbbrev: ["D", "L", "M", "M", "J", "V", "S"],
today: 'Hoy',
cancel: 'Cancelar',
clear: 'Limpar',
done: 'Aceptar',
labelMonthSelect: 'Selecciona un mes',
labelYearSelect: 'Selecciona un año',
labelMonthNext: 'Mes siguiente',
labelMonthPrev: 'Mes anterior',
},
onSelect: localizeDateFormat,
onDraw: initDateFormat,
});
/**
/**
Set the right short date format when displaying the calendar. */ function localizeDateFormat(selectedDate) { var shortWeekdays = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]; var shortMonths = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; var day = selectedDate.getDate(); var weekday = shortWeekdays[selectedDate.getDay()]; var month = shortMonths[selectedDate.getMonth()];
var formattedDate = weekday + ', ' + day + ' de ' + month;
document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
}
// Initialize and set the timepicker $('.timepicker').timepicker({ container: 'body', showClearBtn: 'true', // innerRadius: 70, // outerRadius: 105, // tickRadius: 20, default: 'now', twelveHour: false, // change to 12 hour AM/PM clock from 24 hour autoclose: false, vibrate: false, i18n: { cancel: 'Cancelar', clear: 'Limpar', done: 'Aceptar', }, });
- JavaScript (The call and activation of the dateTime Picker)
var selFechaIngreso = $('#fechaIngreso');
MaterialDateTimePicker.create(selFechaIngreso); // Activa el Picker de fecha
I've seen that in my Materialize 1.0.0 the Date Picker has the displayed text built-in as follow:
I mean that "Ven, Lug 26" on the left of this example of a Date Picker localized in another language:
Maybe it should be allowed to format that important displayed part with a new
i18n.displayDate
option or something similar. For example, for the current behaviour:Or for another behaviour:
Etc.
What do you think about?