New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Date Picker has the '.date-text' hardcoded to "day, month date" (e.g. "Fri, Jul 26") #6421
Comments
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 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.
|
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?
The text was updated successfully, but these errors were encountered: