Home > database >  Getting array of dates for a specific week with React DayPicker
Getting array of dates for a specific week with React DayPicker

Time:07-22

I would like to be able to click a specific week number in the react DayPicker and have an array of all dates contained in that week returned to me.

I am using this DayPicker package: https://react-day-picker.js.org/

I have copied the example code from react dayPicker to allow me to click a specific week in a month: https://react-day-picker.js.org/basics/customization

import { useState } from 'react'
import { DayPicker } from 'react-day-picker'

export const WeekPicker = () => {

  const [weekNumber, setWeekNumber] = useState()
  const footer = weekNumber
    ? `You clicked the week n. ${weekNumber}.`
    : 'Try clicking a week number.'

  

  return (
    <DayPicker
      showWeekNumber
      onWeekNumberClick={setWeekNumber}
      footer={footer}
    />
  )
}

I can see in the EventHandlers.d.ts file there is a WeekNumberClickEventHandler with the variable called dates however I am only able to access the weekNumber variable

/**The event handler when the week number is clicked. */
export declare type WeekNumberClickEventHandler = (
/** The week number that has been clicked. */
weekNumber: number, 
/** The dates in the clicked week. */
dates: Date[], 
/** The mouse event that triggered this event. */
e: React.MouseEvent) => void;

Any help would be appreciated. I am coding in JS but I realise the DayPicker package is written in TS.

CodePudding user response:

dates is the second argument in your callback

import { useState } from 'react'
import { DayPicker } from 'react-day-picker'

export const WeekPicker = () => {

  const [weekNumber, setWeekNumber] = useState()
  const footer = weekNumber
    ? `You clicked the week n. ${weekNumber}.`
    : 'Try clicking a week number.'

  

  return (
    <DayPicker
      showWeekNumber
      onWeekNumberClick={(weekNumber, dates) => {
        setWeekNumber(weekNumber);
        console.log(dates)
      }}
      footer={footer}
    />
  )
}
  • Related