在物化 css 中更改日期选择器的语言

Question

我正在尝试在实际实现 css 版本 0.99.0 中更改 datepicker 的语言，但不起作用。我尝试更改 * 日期选择器 defaults.in materialize.js 上的语言，但也没有用。 有人知道怎么做吗？谢谢。

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



});

Answer 1

在 materializecss 1.0.0-beta 中将 i18n 对象设置为西班牙语翻译：

$('.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"]
            }
        });

Answer 2

根据the docs，选择器：

可以扩展以添加对国际化的支持。

开箱即用提供超过 40 种语言的翻译，您可以通过以下两种方式之一添加：

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

更多翻译请访问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">

Answer 3

如有必要，将语言更改为 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
    });
});

Answer 4

在 materializecss 1.0.0-beta 中将 i18n 对象设置为土耳其语翻译：

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

Answer 5

对于版本 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']
        }
    });