I'm using pikaday with the i18n option with names of the months and days in spanish, my problem is that in the input text/placeholder still shows the english names of said months.

This is my JS code:

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

This should be straight forward but i'm puzzled as the pop-up calendar shows the names in the correct language, but not in the input placeholder.

I'm using pikaday with the i18n option with names of the months and days in spanish, my problem is that in the input text/placeholder still shows the english names of said months.

This is my JS code:

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

This should be straight forward but i'm puzzled as the pop-up calendar shows the names in the correct language, but not in the input placeholder.

• javascript
• pikaday

• If you post your code in a working snippet you help us to help you ^^ – Marco Salerno Commented Aug 23, 2018 at 15:15
• We also need the code of the output in order to help you. – Thomas van Broekhoven Commented Aug 23, 2018 at 15:17
• 1 I have created codepen for reference which is due to value mentioned in input - codepen.io/nagasai/pen/wEKBxx – Naga Sai A Commented Aug 23, 2018 at 15:20

3 Answers 3

Your code should work fine.Check for other dependencies which may cause the issue.

Check below:

 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./Pikaday/css/pikaday.css">
<script src="https://dbushell./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">

The Pikaday i18n normally uses moment.js. If you don't want to use that, you have to do it yourself. You already provide the month and day names… but not the method that is used to fill in the input box value. This is done with the toString() method:

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

If you want to be able to parse text from the input box to get the correct value in the calendar, you'll also need to implement the parse() method… but at this point it may be easier to use moment.js and let it handle the i18n for you.

This is all described in the Formatting section of the Pikaday doc.

To achieve expected result , use below option

1. Import Locale/es.js and Set Locale to spanish using moment - moment.locale('es') ;
2. In locale section of Pikaday, use moment for months , weekdays and weekdaysShort instead of providing hard coded values

<input type="text" id="datepicker-2months" value="9 Octubre 2014">
<link rel="stylesheet" href="https://dbushell./Pikaday/css/pikaday.css"> 
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
<script src="https://cdnjs.cloudflare./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