Bug: renderWeek -> formatter.formatWeekNumber is missing year or date

[wavded]

Not sure if this is a bug or feature but was a regression from 7.x using renderWeek. The formatWeekNumber. The function is passed a weekNumber but I don't know what year it is. The previous implementation would pass the start of the week so we'd have the year. The new implementation only passes a weekNumber that resets whenever a new year is reached so there is no way to understand what year the week relates to.

[gpbl]

@wavded you are right, the function signature could have been changed in v8.

This is actually not a regression – maybe just the same name. The function formats the week number in the first column when showWeekNumber is on: https://react-day-picker.js.org/basics/customization#showing-the-week-numbers

Could you please better explain your use case? Thanks.

[wavded]

Sure, in that spot we display a cost for services for that week instead of the week number. The cost of services extend across years depending on the time of year. When upgrading from 7.x to 8.x there we were able to know the year when rendering the week number which we used. Now in 8.x there doesn't appear to be anyway to find out the year (before it would tell us the date of the beginning of the week as the second argument). That help?

[gpbl]

I think you could get that feature by using a custom component for WeekNumber: would that work for you?

When using custom components you may find useful the DayPicker hooks: https://react-day-picker.js.org/guides/custom-components#daypicker-hooks

https://codesandbox.io/s/react-daypicker-forked-unvr8v?file=/src/App.tsx

import {
  DayPicker,
  useNavigation,
  WeekNumber,
  WeekNumberProps
} from "react-day-picker";

function CustomWeekNumber(props: WeekNumberProps) {
  const { currentMonth } = useNavigation();
  return (
    <>
      <small>{currentMonth.getFullYear()}</small>
      {/* Render the original component */}
      <WeekNumber {...props} />
    </>
  );
}

export default function App() {
  const [selected, setSelected] = React.useState<Date>();

  return (
      <DayPicker
        showWeekNumber
        mode="single"
        selected={selected}
        onSelect={setSelected}
        components={{ 
			WeekNumber: CustomWeekNumber
		}}
      />
  );
}