Search code examples
reactjsdatepickerblueprintjs

Change months names from DateInput BlueprintJS


So I'm using the BlueprintJS datetime package in a React project to render a birthday picker and I want to set the months names of the select to the Spanish version. In their documentation says they use react-day-picker in order to render the calendar and from the react-day-picker documentation there's a parameter to set the months names from an array but I don't get it to change the select names. This is what I've set in the component. The weekdaysLong and weekdaysShort works fine but not the months property.

<DateInput
      formatDate={date => date.toLocaleString('es-ES', {year: "numeric", month: "2-digit", day: "numeric"})}
      onChange={this.handleDateChange}
      parseDate => new Date(str)}
      placeholder={"DD/MM/YYYY"}
      maxDate={now}
      minDate={minDate}
      value={this.state.date}
      dayPickerProps={{
            locale: 'es',
            months: DateFormatString.months,
            weekdaysLong: DateFormatString.weekDaysLong,
            weekdaysShort: DateFormatString.weekDaysShort,
            firstDayOfWeek: 1,
      }}
/>

And this is the variable where I have the months and weekdays

const DateFormatString = {
  months: [
    'Enero',
    'Febrero',
    'Marzo',
    'Abril',
    'Mayo',
    'Junio',
    'Julio',
    'Agosto',
    'Septiembre',
    'Octubre',
    'Noviembre',
    'Diciembre'
  ],
  weekDaysLong: [
    'Domingo',
    'Lunes',
    'Martes',
    'Miercoles',
    'Jueves',
    'Viernes',
    'Sabado'
  ],
  weekDaysShort: [
    'Do',
    'Lu',
    'Ma',
    'Mi',
    'Ju',
    'Vi',
    'Sa'
  ]
}

Anyone have an idea what is happening or know another way to set the whole component's language?


Solution

  • It seems to be a recently opened (and soon fixed) issue as per this github issue page: https://github.com/palantir/blueprint/issues/3265

    Either you can wait for a fix to be merged (and then update your package.json to use the new version), or you must use some other library. Hope that helps!