簡體   English   中英

使用 React DayPicker 獲取特定一周的日期數組

[英]Getting array of dates for a specific week with React DayPicker

我希望能夠單擊反應 DayPicker 中的特定周數,並將該周包含的所有日期的數組返回給我。

我正在使用這個 DayPicker 包: https ://react-day-picker.js.org/

我已經從 react dayPicker 復制了示例代碼,以允許我單擊一個月中的特定周: 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}
    />
  )
}

我可以在 EventHandlers.d.ts 文件中看到一個 WeekNumberClickEventHandler 變量名為 dates 但是我只能訪問 weekNumber 變量

/**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;

任何幫助,將不勝感激。 我正在用 JS 編碼,但我意識到 DayPicker 包是用 TS 編寫的。

日期是回調中的第二個參數

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}
    />
  )
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM