Materialize: Date Picker has the '.date-text' hardcoded to "day, month date" (e.g. "Fri, Jul 26")

[valerio-bozzolan]

I've seen that in my Materialize 1.0.0 the Date Picker has the displayed text built-in as follow:

value: function _renderDateDisplay() {
    ...
    this.dateTextEl.innerHTML = day + ", " + month + " " + date;
}

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:

M.Datepicker.init(elems, {
    i18n: {
        displayDate: 'ddd, mmm d'
    }
} );

Or for another behaviour:

M.Datepicker.init(elems, {
    i18n: {
        displayDate: 'd mmm (ddd)'
    }
} );

Etc.

What do you think about?

[harawata]

This may be a duplicate of #5905 .
There also is an open PR #6078 .

[davelavoie]

@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;
    } 

[filmico]

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

1. DateTimePicker from fawadtariq https://github.com/fawadtariq/materialize-datetimepicker
2. The solution exposed above from @davelavoie to Tweak the dates to the spanish dd/mm/yy format at the left of the panel.
3. Some Tweaks obtained from here and there. Sorry but I lost track of the source of those modifications).

• html

    <div class="input-field col m6">
        <input id="fechaIngreso" name="fechaIngreso" type="text">
        <label for="fechaIngreso">Fecha y Hora de Ingreso</label>
    </div>

• JavaScript Initialize

// 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,
});

/**
 * 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 = ["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