CODEWITHSUNDEEP
jqueryhtmlcssdatepickermaterialize
JS Santana
JS Santana

Reputation: 119

Change language of datepicker in materialize css

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



});

Upvotes: 4

Views: 18828

Answers (5)

Eduardo Tolentino
Eduardo Tolentino

Reputation: 1709

For version 1.0.0

        //Initialization date picker
    const datepicker = document.querySelectorAll('.datepicker');
    M.Datepicker.init(datepicker, {
        i18n: {
            cancel: 'Cancelar',
            clear: 'Limpiar',
            done: 'OK',
            close: 'Cerrar',
            default: 'now',
            today: 'Hoy',
            closeOnSelect: false,
            format: 'yyyy-mm-dd',
            selectMonths: true,
            previousMonth: '<',
            nextMonth: '>',
            months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            monthsShort: ['Ene', 'Feb', 'Mar', 'Ab', 'May', 'Jun', 'Jul', 'Ag', 'Sept', 'Oct', 'Nov', 'Dic'],
            firstDay: true,
            weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
            weekdaysAbbrev: ['L', 'M', 'M', 'J', 'V', 'S', 'D']
        }
    });

Upvotes: 0

Vitor Soares Vian
Vitor Soares Vian

Reputation: 36

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

Upvotes: 2

ismail hakki eren
ismail hakki eren

Reputation: 21

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'
    }
});

Upvotes: 2

Daniel Armando
Daniel Armando

Reputation: 151

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"]
            }
        });

Upvotes: 14

Brett DeWoody
Brett DeWoody

Reputation: 62871

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">

Upvotes: 4

Related Questions