Materialize: Datepicker internationalization options doesn't seen to work

Created on 20 Apr 2018 · 2Comments · Source: Dogfalo/materialize

Hi,
I'm developing a web app in portuguese with Materialize 1.0.0-beta, and i'm trying to use datepicker internationalization options but it doesnt seen to work.

"onOpen" and "format" options are working in the same options dict, so I think the problem are in internationalization options, (and autoClose option also)

I insulated the issue in the code below. (downloading a fresh materialize js/css/font folders)

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <input type="text" class="datepicker">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script type="text/javascript">
            $(document).ready(() => {
                var datePickerOptions = {
                    onOpen: () => {
                      alert('onOpen config working');
                    },
                    format: 'dd/mm/yyyy',

                    autoClose: true,
                    nextMonth: 'Proximo Mês',
                    previousMonth: 'Mês Anterior',
                    months: [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ],
                    monthsShort: [ 'Jan', 'Fev', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ],
                    weekdays: [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado' ],
                    weekdaysShort: [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb' ],
                    weekdaysAbbrev: [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ],
                    clear: 'Limpar',
                    done: 'Ok',
                };
                var datePicker = document.querySelector('.datepicker');
                M.Datepicker.init(datePicker, datePickerOptions);
            });
        </script>
    </body>
</html>

Source

ghost

Most helpful comment

Hey, I'm working with Materialize 1.0.0 beta, my datepicker snippets are:

HTML:
<input type="text" class="datepicker">

CSS:
// to adjust the width if the month name doesn't fit (originally it's defined in 70px)
.datepicker-controls .select-month input {
    width: 80px;
}

JS:
// here I have two internationalization objects but in the initialization I'm using the spanish one
<script>
    inter_en = {
        cancel: 'Cancel',
        clear: 'Clear',
        done:    'Ok',
        previousMonth:    '‹',
        nextMonth:    '›',
        months:    [
            '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'
        ],

        weekdays:    [
            'Sunday',
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday'
        ],

        weekdaysShort:    [
            'Sun',
            'Mon',
            'Tue',
            'Wed',
            'Thu',
            'Fri',
            'Sat'
        ],

        weekdaysAbbrev:    ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    };


    inter_es = {
        cancel: 'Cancelar',
        clear: 'Limpiar',
        done:    'Ok',
        previousMonth:    '‹',
        nextMonth:    '›',
        months:    [
            'Enero',
            'Febrero',
            'Marzo',
            'Abril',
            'Mayo',
            'Junio',
            'Julio',
            'Agosto',
            'Septiembre',
            'Octubre',
            'Noviembre',
            'Diciembre'
        ],
        monthsShort:    [
            'Ene',
            'Feb',
            'Mar',
            'Abr',
            'May',
            'Jun',
            'Jul',
            'Ago',
            'Sep',
            'Oct',
            'Nov',
            'Dic'
        ],

        weekdays:    [
            'Domingo',
            'Lunes',
            'Martes',
            'Miércoles',
            'Jueves',
            'Viernes',
            'Sábado'
        ],

        weekdaysShort:    [
            'Dom',
            'Lun',
            'Mar',
            'Mié',
            'Jue',
            'Vie',
            'Sáb'
        ],

        weekdaysAbbrev:    ['D', 'L', 'M', 'M', 'J', 'V', 'S']

    };

    var options = {
        i18n: inter_es,
    };
    var elem = document.querySelector('.datepicker');
    var instance = M.Datepicker.init(elem, options);
    // // Or with jQuery
    //
    // $(document).ready(function(){
    //     $('.datepicker').datepicker();
    // });
</script>

All working fine, I hope it helps!

apazacoder on 20 Apr 2018

👍3

All 2 comments

Hey, I'm working with Materialize 1.0.0 beta, my datepicker snippets are:

HTML:
<input type="text" class="datepicker">

CSS:
// to adjust the width if the month name doesn't fit (originally it's defined in 70px)
.datepicker-controls .select-month input {
    width: 80px;
}

JS:
// here I have two internationalization objects but in the initialization I'm using the spanish one
<script>
    inter_en = {
        cancel: 'Cancel',
        clear: 'Clear',
        done:    'Ok',
        previousMonth:    '‹',
        nextMonth:    '›',
        months:    [
            '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'
        ],

        weekdays:    [
            'Sunday',
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday'
        ],

        weekdaysShort:    [
            'Sun',
            'Mon',
            'Tue',
            'Wed',
            'Thu',
            'Fri',
            'Sat'
        ],

        weekdaysAbbrev:    ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    };


    inter_es = {
        cancel: 'Cancelar',
        clear: 'Limpiar',
        done:    'Ok',
        previousMonth:    '‹',
        nextMonth:    '›',
        months:    [
            'Enero',
            'Febrero',
            'Marzo',
            'Abril',
            'Mayo',
            'Junio',
            'Julio',
            'Agosto',
            'Septiembre',
            'Octubre',
            'Noviembre',
            'Diciembre'
        ],
        monthsShort:    [
            'Ene',
            'Feb',
            'Mar',
            'Abr',
            'May',
            'Jun',
            'Jul',
            'Ago',
            'Sep',
            'Oct',
            'Nov',
            'Dic'
        ],

        weekdays:    [
            'Domingo',
            'Lunes',
            'Martes',
            'Miércoles',
            'Jueves',
            'Viernes',
            'Sábado'
        ],

        weekdaysShort:    [
            'Dom',
            'Lun',
            'Mar',
            'Mié',
            'Jue',
            'Vie',
            'Sáb'
        ],

        weekdaysAbbrev:    ['D', 'L', 'M', 'M', 'J', 'V', 'S']

    };

    var options = {
        i18n: inter_es,
    };
    var elem = document.querySelector('.datepicker');
    var instance = M.Datepicker.init(elem, options);
    // // Or with jQuery
    //
    // $(document).ready(function(){
    //     $('.datepicker').datepicker();
    // });
</script>

All working fine, I hope it helps!

apazacoder on 20 Apr 2018

👍3

As @apazacoder pointed out, the key is to put the internationalization options in the i18n property of the options.