Pikaday i18n по-прежнему показывает названия дней и месяцев на английском языке

Я использую 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']
        }
    });

Это должно быть понятно, но я озадачен, так как всплывающий календарь показывает имена на правильном языке, но не в поле ввода.

Если вы разместите свой код в рабочем фрагменте, вы поможете нам помочь вам ^^

Marco Salerno 23.08.2018 17:15

Нам также нужен код вывода, чтобы помочь вам.

Thomas van Broekhoven 23.08.2018 17:17

Я создал код для справки из-за значения, указанного во вводе - codepen.io/nagasai/pen/wEKBxx

Naga Sai A 23.08.2018 17:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
1 645
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваш код должен работать нормально. Проверьте другие зависимости, которые могут вызвать проблему.

Проверьте ниже:

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

я все еще вижу в тексте заполнителя ввода дату на английском языке? это просто я?

Progs 23.08.2018 17:55

Для достижения ожидаемого результата используйте опцию ниже

  1. Импортируйте Locale / es.js и установите Locale на испанский, используя moment - moment.locale ('es');
  2. В разделе языковых стандартов Pikaday используйте момент для месяцев, рабочих дней и будних дней Коротко вместо предоставления жестко закодированных значений

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

код для справки

Ответ принят как подходящий

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(" ");
      }
    });

Попробуйте на Codepen

Если вы хотите иметь возможность анализировать текст из поля ввода, чтобы получить правильное значение в календаре, вам также необходимо реализовать метод parse() ... но на этом этапе май будет проще использовать moment.js и позволить ему обрабатывать i18n для тебя.

Все это описано в Раздел форматирования документа Pikaday.

Другие вопросы по теме