Pikaday i18n 仍然以英文显示日期和月份的名称

Question

我正在使用带有 i18n 选项的 pikaday，带有西班牙语的月份和日期名称，我的问题是在输入中 text/placeholder 仍然显示所述月份的英文名称。

这是我的JS代码：

 var picker = new Pikaday(
    {
        numberOfMonths: 2,
        field: document.getElementById('datepicker-2months'),
        firstDay: 1,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [2000, 2020],
        i18n: {
            previousMonth : 'Mes anterior',
            nextMonth     : 'Mes siguiente',
            months        : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
            weekdays      : ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
            weekdaysShort : ['Dom','Lun','Mar','Mier','Jue','Vie','Sab']
        }
    });

这应该是直截了当的，但我很困惑，因为弹出式日历以正确的语言显示名称，但不是在输入占位符中。

Answer 1

对于可能导致问题的其他依赖项，您的代码应该 fine.Check 有效。

检查以下内容：

 var picker = new Pikaday(
    {
        numberOfMonths: 2,
        field: document.getElementById('datepicker-2months'),
        firstDay: 1,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [2000, 2020],
        i18n: {
            previousMonth : 'Mes anterior',
            nextMonth     : 'Mes siguiente',
            months        : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
            weekdays      : ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
            weekdaysShort : ['Dom','Lun','Mar','Mier','Jue','Vie','Sab']
        }
    });

 <link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<script src="https://dbushell.com/Pikaday/pikaday.js"></script>
<br><br><br><br><br><br><br><br><br><br><br>
<label for="datepicker-2months">Date:</label>

<input type="text" id="datepicker-2months">

Answer 2

要达到预期结果，请使用以下选项

导入 Locale/es.js 并使用 moment 将语言环境设置为西班牙语 - moment.locale('es') ;
在 Pikaday 的区域设置部分，使用 moment 表示月、工作日和工作日，而不是提供硬编码值

<input type="text" id="datepicker-2months" value="9 Octubre 2014">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/es.js"></script>
<script>
//Set Locale to spanish
  moment.locale('es');
    var picker = new Pikaday(
    {
        numberOfMonths: 2,
        field: document.getElementById('datepicker-2months'),
        firstDay: 1,
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2020, 12, 31),
        yearRange: [2000, 2020],
      format: 'D MMM YYYY',
        i18n: {
            previousMonth : 'Mes anterior',
            nextMonth     : 'Mes siguiente',
months        : moment.localeData()._months,
    weekdays      : moment.localeData()._weekdays,
    weekdaysShort : moment.localeData()._weekdaysShort
        }
    });
</script>

codepen for reference

Answer 3

Pikaday 国际化通常使用moment.js。如果你不想使用它，你必须自己做。您已经提供了月份和日期名称……但没有提供用于填写输入框值的方法。这是通过 toString() 方法完成的：

var monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    picker = new Pikaday({  
      numberOfMonths: 2,
      field: document.getElementById('datepicker-2months'),
      firstDay: 1,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2020, 12, 31),
      yearRange: [2000, 2020],
      i18n: {
        previousMonth: 'Mes anterior',
        nextMonth    : 'Mes siguiente',
        months       : monthNames,
        weekdays     : ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mier', 'Jue', 'Vie', 'Sab']
      },
      toString: function(date) {
        var parts = [date.getDate(), monthNames[date.getMonth()], date.getFullYear()];
        return parts.join(" ");
      }
    });

Try it on Codepen

如果你希望能够解析输入框中的文本以获取日历中的正确值，你还需要实现 parse() 方法……但此时它可能更易于使用moment.js并让它为您处理国际化。

这在Formatting section of the Pikaday doc.

中都有描述

Pikaday i18n 仍然以英文显示日期和月份的名称

Pikaday i18n still showing names of the days and months in english

javascript

pikaday