Another language for datepicker

[elmoaaron]

hey, I want to change the language of the datepicker, I already find this: https://github.com/Dogfalo/materialize/issues/1343 it tells I have to change some things in materialize.js, but how can I modify that js file using this gem?

[rafaelfbs]

Use $.fn['pickadate'].defaults. An example for datepicker in portuguese:

const DatePicker = $.fn['pickadate']
Object.assign(DatePicker.defaults, {
    clear: 'Limpar',
    close: 'Fechar',
    labelMonthNext: 'Mês seguinte',
    labelMonthPrev: 'Mês anterior',
    labelMonthSelect: 'Selecione um mês',
    labelYearSelect: 'Selecione um ano',
    monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    today: 'Hoje',
    weekdaysFull: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
    weekdaysLetter: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
    weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
})

[lebart]

In a multilingual app I get the locale via a data attribute and set the language this way:

var intiDatepickers = function() {
  var yearsRange = $('.datepicker').data('years-range') || 15;
  var locale = $('.datepicker').data('locale') || 'fr';

  switch (locale) {
    case 'fr':
      var translations = {
        labelMonthNext: 'Mois suivant',
        labelMonthPrev: 'Mois précédent',
        labelMonthSelect: 'Sélectionnez un mois',
        labelYearSelect: 'Sélectionnez une année',
        monthFull : [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Decembre' ],
        monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
        weekdaysFull: [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ],
        weekdaysShort: [ 'Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa' ],
        weekdaysLetter: [ 'D', 'L', 'M', 'M', 'J', 'V', 'S' ],
        today: "Aujourd'hui",
        clear: 'Réinitialiser',
        close: 'Fermer'
      };
      break;
    case 'en':
      var translations = {
        labelMonthNext: 'Next month',
        labelMonthPrev: 'Previous month',
        labelMonthSelect: 'Select a month',
        labelYearSelect: 'Select a year',
        monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
        monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
        weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
        weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
        weekdaysLetter: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
        today: 'Today',
        clear: 'Clear',
        close: 'Close'
      };
      break;
  };

  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: yearsRange, // Creates a dropdown of 15 years to control year
    format: 'yyyy-mm-dd', // Valid format for database
    labelMonthNext: translations.labelMonthNext,
    labelMonthPrev: translations.labelMonthPrev,
    labelMonthSelect: translations.labelMonthSelect,
    labelYearSelect: translations.labelYearSelect,
    monthsFull: translations.monthFull,
    monthsShort: translations.monthsShort,
    weekdaysFull: translations.weekdaysFull,
    weekdaysShort: translations.weekdaysShort,
    weekdaysLetter: translations.weekdaysLetter,
    today: translations.today,
    clear: translations.clear,
    close: translations.close,
    onSet: function(arg){
      if ('select' in arg) {
        this.close();
      }
    },

  });
};
$(document).ready(intiDatepickers) //standard jQuery behavior
$(document).on('page:load', intiDatepickers) //adaptation to turbolinks