React Day Picker months 和 weekdays_long

Question

I am using "react": "^18.2.0", "react-day-picker": "^8.1.0", and I am trying to change the months and days name in French, but when I pass my arrays to my component <DayPicker/> , nothing changes. When I log my arrays, I can see it good.

All the answers I found for this problem or for old versions of react-day-picker. Can somebody help me please?

From another component of my site, I import <Message/> , inside which I import my function <DayPicking/> declared above, to create the <DayPicker/>

I don't have any error or warnings, but the months and days stay the default ones

Sorry for my English, I hope it's clear, and thank you very much for your help

import React, {useRef} from "react";
import PropTypes from "prop-types";
import {addMonths} from "date-fns";
import {DayPicker} from 'react-day-picker'

const DayPicking = ({
                        MONTHS,
                        WEEKDAYS_LONG,
                        WEEKDAYS_SHORT,
                        selectedDay,
                        setSelectedDay,
                        ref
                    }) => {

    const today = new Date();
    const nextMonth = addMonths(new Date(), 1)
    console.log(MONTHS) // gives back the array with months
    console.log(WEEKDAYS_LONG) // gives back the weekdays array also
  
    return (
        <div ref={ref}>
            <DayPicker
                mode={"single"}
                selected={selectedDay}
                onSelect={setSelectedDay}
                fromDate={today}
                months={MONTHS}
                weekdaysLong={WEEKDAYS_LONG}
                weekdaysShort={WEEKDAYS_SHORT}
                onDayClick={handleDayClick}
                selectedDays={selectedDay}
                disabledDays={[
                    {before: new Date(new Date().getTime() + (24 * 60 * 60 * 1000))},
                    {daysOfWeek: [0]}
                ]}
                firstDayOfWeek={1}
            />
        </div>
    );
};

const Messages = ({
     selectedDay, 
     setSelectedDay
     }) => {

    const MONTHS = [
        "Janvier",
        "Février",
        "Mars",
        "Avril",
        "Mai",
        "Juin",
        "Juillet",
        "Août",
        "Septembre",
        "Octobre",
        "Novembre",
        "Décembre",
    ];
    const WEEKDAYS_LONG = [
        "Dimanche",
        "Lundi",
        "Mardi",
        "Mercredi",
        "Jeudi",
        "Vendredi",
        "Samedi",
    ];
    const WEEKDAYS_SHORT = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];

    const lastListElement = useRef(null);

    console.log(MONTHS)

    return (
        <>
            <DayPicking
                ref={lastListElement}
                MONTHS={MONTHS}
                WEEKDAYS_LONG={WEEKDAYS_LONG}
                WEEKDAYS_SHORT={WEEKDAYS_SHORT}
                handleDayClick={handleDayClick}
                selectedDay={selectedDay}
                setSelectedDay={setSelectedDay}
            />
        </>

    );
};

Messages.propTypes = {
    selectedDay: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
    setSelectedDay: PropTypes.func
};

export default Messages;

Answer 1

Had a similar issue and was told to use the formatter prop: https://react-day-picker.js.org/api/types/Formatters

Create a function called formatWeekdayName and import the DateFormatter type from react-day-picker. You'll also need to import the format function from date-fns.

Then, you can do the following:

import { format } from 'date-fns';
import frenchLocale from 'date-fns/locale/fr';
import { DateFormatter} from 'react-day-picker';


export const Component = () => {

...

    const formatWeekdayName: DateFormatter = (day) => {
        return format(day, 'EEE', { locale: frenchLocale });
    };

    return (
       <DayPicker formatters={{ formatWeekdayName }};
    );

};