Get displayMonth in Footer

[homerchen19]

Hello, I noticed some components like Caption, Day can access displayMonth from their props. I wonder if we can also access it from the Footer component and the footer prop. Thank you.

[gpbl]

You can get the current navigation state with the useNavigation hook:

https://codesandbox.io/s/daypicker-footer-with-usenavigation-xixfd6?file=/src/App.tsx

import React from "react";
import { DayPicker, useNavigation } from "react-day-picker";
import "react-day-picker/dist/style.css";

function Footer() {
  const { currentMonth, displayMonths } = useNavigation();
  return <span>{currentMonth.toLocaleDateString()}</span>;
}

export default function App() {
  const [selectedDay, setSelectedDay] = React.useState<Date | undefined>();
  return (
    <DayPicker
      components={{ Footer }}
      mode="single"
      onSelect={setSelectedDay}
      selected={selectedDay}
    />
  );
}

I agree however in a next version would work better pass this as props too.

[homerchen19]

Hi, thanks for the reply. The solution can't fulfill my needs actually because the currentMonth is always the first month if there are multiple months displayed.
I'd like to display different content in footers based on its displayMonth. This is achievable for Caption because it can get displayMonth from props. So if there are two months displayed, the value of displayMonth for the first Caption is different from the value displayMonth for the other Caption. Since there is no way to get displayMonth in footer, I can't tell the difference between two footers.

[gpbl]

Oh got it - thanks!

[gpbl]

@homerchen19 from v8.6.0 you can start using the displayMonth prop in footer.