Datetimepicker translation

Topic: Datetimepicker translation

U2P pro premium priority asked 2 months ago

Expected behavior

I must be able to translate component

Actual behavior

Unlike the datetime component, adding translations to initialization via JS has no effect and the documentation does not imply that this is possible

Resources (screenshots, code snippets etc.)

<script type="text/javascript">
    //TODO bug translate à résoudre
    const {{$name}}Translated = document.querySelector("#div-datetimepicker-{{$name}}");
    new mdb.Datetimepicker({{$name}}Translated, {
        timepicker: { format24: true,  format12: false },
        title: 'Sélectionner une date',
        monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthsShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
        weekdaysFull: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        weekdaysNarrow: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
        okBtnText: 'Ok',
        clearBtnText: 'Effacer',
        cancelBtnText: 'Fermer',
        okBtnLabel: 'Confirmer la sélection',
        clearBtnLabel: 'Effacer la sélection',
        cancelBtnLabel: 'Annuler la sélection',
        nextMonthLabel: 'Mois suivant',
        prevMonthLabel: 'Mois précédent',
        nextYearLabel: 'Année suivante',
        prevYearLabel: 'Année précédente',
        nextMultiYearLabel: '24 années suivantes',
        prevMultiYearLabel: '24 années précédentes',
        switchToMultiYearViewLabel: 'Basculer vers la liste des années',
        switchToDayViewLabel: 'Basculer vers la liste des jours',
    });

</script>

Only timepicker key have effect. Same dict work well on datepicker.

Add comment

U2P pro premium priority answered 2 months ago

0 0 Best answer

Ok, understood. thank's

Updated JS init works well for translate but little bug on UI in some langage (screen below)

new mdb.Datetimepicker({{$name}}Translated, {
        timepicker: {
            format24: true,
            format12: false,
            okLabel: 'Confirmer',
            clearLabel: 'Effacer',
            cancelLabel: 'Annuler',
        },
        datepicker: {
            title: 'Sélectionner une date',
            monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
            monthsShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
            weekdaysFull: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
            weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            weekdaysNarrow: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
            okBtnText: 'Ok',
            clearBtnText: 'Effacer',
            cancelBtnText: 'Fermer',
            okBtnLabel: 'Confirmer la sélection',
            clearBtnLabel: 'Effacer la sélection',
            cancelBtnLabel: 'Annuler la sélection',
            nextMonthLabel: 'Mois suivant',
            prevMonthLabel: 'Mois précédent',
            nextYearLabel: 'Année suivante',
            prevYearLabel: 'Année précédente',
            nextMultiYearLabel: '24 années suivantes',
            prevMultiYearLabel: '24 années précédentes',
            switchToMultiYearViewLabel: 'Basculer vers la liste des années',
            switchToDayViewLabel: 'Basculer vers la liste des jours',
        }
    });

This capture of UI bug.

enter image description here