Inconsistent weekday headers and grid dates when using date-fns with default locale

[daveallie]

Code

import { DayPicker } from 'react-day-picker';
import { enAU } from 'date-fns/locale';
import * as dateFns from 'date-fns';

dateFns.setDefaultOptions({ locale: enAU });

export function App() {
  return <DayPicker dateLib={dateFns} mode='single' />;
}

Expected Behavior

I would expect the weekday column headers to correctly match up with the dates in the grid as pictured below:

Note: Friday 4th October 2024 is a correct date and appears in the two grids

locale explicitly set to enAU (locale={enAU}):

locale explicitly set to enUS (locale={enUS}):

Actual Behavior

When dateFns is supplied as the dateLib and has been setup with the default locale of enAU, the weekday headers render as enUS, but the grid renders as enAU, resulting in incorrect weekdays lining up with dates:

Note: Friday 5th October 2024 is not a correct date

[gpbl]

Hi @daveallie , dateLib is a private, experimental prop and we don't support it. In this case it seems it is not used to get the week day names.

To localize DayPicker:

- return <DayPicker dateLib={dateFns} mode='single' />;
+ return <DayPicker locale={enAU} mode='single' />;

[daveallie]

Using dateLib was mostly for demonstration purposes, this is still an issue without it: https://codesandbox.io/p/sandbox/react-day-picker-2509-w7hths

Taking a quick look at the code, it looks like the crux of the issues is that unmodified props is passed to useCalendar (which builds the grid). This unmodified props object does not have the default locale which is set at the top of the DayPicker component. Therefore useCalendar is getting an undefined locale object and falling back to the date-fns default (in this case enAU).

getWeekdays explicitly gets passed the props it needs including the locale prop with the enUS fallback.

So if the locale and weekStartsOn props are not used when rendering <DayPicker />, then useCalendar is using the date-fns default and getWeekdays is using enUS. If date-fns has been set with a default that has a different start of week than the US, then the dates will be aligned to incorrect weekday headers

[gpbl]

@daveallie thanks for your details here!

this is still an issue without it: codesandbox.io/p/sandbox/react-day-picker-2509-w7hths

setDefaultOptions wouldn't work anyway because DayPicker does not use date-fns as peer dependency anymore.

if the locale and weekStartsOn props are not used when rendering <DayPicker />, then useCalendar is using the date-fns default and getWeekdays is using enUS.

This is the expected behavior - what does prevent you to use locale prop?

We could expose more clearly the options of date-fns to avoid confusion in the code, but we cannot expect setDefaultOptions to work for you anyway, as the date-fns library is not a peer dependency.

[daveallie]

setDefaultOptions wouldn't work anyway because DayPicker does not use date-fns as peer dependency anymore

Calling setDefaultOptions with locale does affect how DayPicker renders the grid:

enUS (dates match weekday headers)
enAU (dates do not match weekday headers)

I'm not really even looking for DayPicker to honour setDefaultOptions, I'm just looking for consistency. getWeekdays takes a locale argument which falls back to enUS, I think useCalendar should do the same (currently it falls back to undefined which is what's causing this behaviour).

Apologies if this isn't coming across clearly, I'll put up the 1 line fix I'm proposing as a PR, which would address this concern.

what does prevent you to use locale prop?

Nothing tbh, we just weren't specifying it previously and it was causing our calendar pickers to render incorrect dates. We have since fixed that, just trying to avoid people getting caught out by this edge case.

[daveallie]

I have put up a PR explaining a little more and addressing the issue: #2523

A little more than the 1 line fix I suggested, but IMO this is a necessary change to ensure that all references to locale are always the user supplied locale or en-US fallback (vs. user supplied locale or undefined (which then falls back to date-fns default locale))

[gpbl]

Fixed with #2550.