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

【问题标题】：Pikaday i18n still showing names of the days and months in englishPikaday i18n 仍然以英文显示日期和月份的名称
【发布时间】：2019-01-16 07:01:03
【问题描述】：

我将 pikaday 与 i18n 选项一起使用，其中月份和日期的名称为西班牙语，我的问题是在输入文本/占位符中仍显示所述月份的英文名称。

这是我的 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']
        }
    });

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

【问题讨论】：

如果您在工作的 sn-p 中发布您的代码，您可以帮助我们帮助您 ^^
我们还需要输出的代码来帮助您。
我创建了 codepen 以供参考，这是由于输入中提到的值 - codepen.io/nagasai/pen/wEKBxx

标签： javascript pikaday

【解决方案1】：

Pikaday i18n 通常使用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，让它为你处理 i18n。

这在Formatting section of the Pikaday doc中都有描述。

【讨论】：

【解决方案2】：

您的代码应该可以正常工作。检查可能导致问题的其他依赖项。

检查如下：

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

【讨论】：

我仍然在输入占位符文本中看到英文日期？只有我吗？

【解决方案3】：

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

导入 Locale/es.js 并使用 moment - moment.locale('es') 将 Locale 设置为西班牙语；
在 Pikaday 的语言环境部分，使用 moment 来表示months 、 weekdays 和 weekdaysShort 而不是提供硬编码值

<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

【讨论】：