How to localize? about react-datepicker

[tresko]

Thank you.

You pass the phrases as an object. DayLabelFormat, weekdayLabelFormat, and monthLabelForm, these are functions (callbacks) that take a date as an argument and return a string - formatted label. Below is an example with date-fns, but you can also use a moment or you can format labels by yourself.

Here is an example:`

import {es as locale} from 'date-fns/locale'
import {format} from 'date-fns'

function Test() {
  return (
    <DateRangeInput
      ...otherProps,
      displayFormat={displayFormat}
      phrases={{
        datepickerStartDatePlaceholder: 'Seleccionar',
        datepickerStartDateLabel: 'Fecha de inicio:',
        datepickerEndDatePlaceholder: 'Seleccionar',
        datepickerEndDateLabel: 'Fecha de inicio:',
        resetDates: 'Deshacer',
        startDateAriaLabel: 'Fecha de inicio',
        endDateAriaLabel: 'Fecha de inicio',
        startDatePlaceholder: 'Fecha de inicio',
        endDatePlaceholder: 'Fecha de inicio',
        close: 'Cerca',
      }}
      displayFormat={text('displayFormat', 'MM/dd/yyyy')}
      dayLabelFormat={(date: Date) => format(date, 'dd', {locale})}
      weekdayLabelFormat={(date: Date) => format(date, 'eeeeee', {locale})}
      monthLabelFormat={(date: Date) => format(date, 'MMMM yyyy', {locale})}
    />
  )
}

Here is a list of all possible phrases click

[PhilGarb]

Thank you so much :) This worked for me. I guess my problem was more with how date-fns handles localization and less about this library after all.

Are you interested in a pull request which takes your answer and maybe a link and small explanation of a date-fns example to extend the Readme?

[tresko]

Yes, of course.