Datetimepicker translation

Topic: Datetimepicker translation

U2P priority asked 10 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 priority answered 9 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)

<pre class="prettyprint"><code>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',
 }
 });
</code></pre>

This capture of UI bug.

Please insert min. 20 characters.

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