Change language of datepicker in materialize css

Question

I'm trying to change the language of datepicker in materialize css version 0.99.0 actual, but don't work. i tried change the language on * The date picker defaults.in materialize.js but didn't worked too. Someone know how to do this? Thanks.

html:

 <div class="input-field col s6">
                    <input type="date" class="datepicker" id="pickdate">
                    <label for="pickdate">DATA</label>
                </div>

javascript:

    $( document ).ready(function() {
    $('.datepicker').pickadate({
        format: 'dd/mm/yyyy',
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year



});

Solution 1

In case of necessity the code to change the language to timepicker.

$(document).ready(function() {
    $('.timepicker').timepicker({
        i18n: {
            cancel: 'Cancelar',
            clear: 'Limpar',
            done: 'Ok'
        },
        twelveHour : false, // twelve hours, use AM/PM
        autoclose: false  //Close the timepicker automatically after select time
    });
});

Solution 2

Setting i18n object to Spanish traslation in materializecss 1.0.0-beta:

$('.datepicker').datepicker({ 
            firstDay: true, 
            format: 'yyyy-mm-dd',
            i18n: {
                months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Set", "Oct", "Nov", "Dic"],
                weekdays: ["Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
                weekdaysShort: ["Dom","Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
                weekdaysAbbrev: ["D","L", "M", "M", "J", "V", "S"]
            }
        });

Solution 3

According to the docs, the picker:

can be extended to add support for internationalization.

Translations for over 40 languages are available out of the box, which you can include in one of two ways:

// Extend the default picker options for all instances.
$.extend($.fn.pickadate.defaults, {
  monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  today: 'aujourd\'hui',
  clear: 'effacer',
  formatSubmit: 'yyyy/mm/dd'
})

// Or, pass the months and weekdays as an array for each invocation.
$('.datepicker').pickadate({
  monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
  weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  today: 'aujourd\'hui',
  clear: 'effacer',
  formatSubmit: 'yyyy/mm/dd'
})

More translations available on the pickadate.js repository.

$(document).ready(function() {
  $('.datepicker').pickadate({
    format: 'dd/mm/yyyy',
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15,
    monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
    today: 'aujourd\'hui',
    clear: 'effacer',
    formatSubmit: 'yyyy/mm/dd'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet" />

<input type="date" class="datepicker" id="pickdate">

Solution 4

Setting i18n object to Turkish traslation in materializecss 1.0.0-beta:

$('.datepicker').datepicker({
    firstDay:1,
    format:'yyyy-mm-dd',
    i18n: {
        months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
        monthsShort: ["Oca", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"],
        weekdays: ["Pazartesi","Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"],
        weekdaysShort: ["Paz","Sal", "Çar", "Per", "Cum", "Cts", "Paz"],
        weekdaysAbbrev: ["P","S", "Ç", "P", "C", "C", "P"],
        cancel:'Çıkış',
        clear:'Temizle',
        done:'Tamam'
    }
});

View more solutions