Question

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

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

Answer 1

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

检查以下内容：

 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 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()方法……但此时 may < / em>易于使用moment.js并让它为您处理i18n。

这一切都在Formatting section of the Pikaday doc中进行了描述。

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

3 个答案: