如何在 React Datepicker 中添加自定義按鈕 Model

Question

我想創建一個這樣的日歷。

問題是我不知道如何在其中添加Apply和Cancel按鈕。 我嘗試了多種解決方案，但未能獲得所需的解決方案。

通過這段代碼我得到了這個。

請幫我在react-datepicker中添加 Button 。

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
const [startDate, setStartDate] = useState(new Date())

<DatePicker
 selected={startDate}
 className='w-[210px] p-3 text-sm font-[Inter-Regular] outline-none text-black-100 '
 onChange={(date) => {
  setStartDate(date as SetStateAction<Date>)
 }}
 showYearPicker
 dateFormat='yyyy'
 yearItemNumber={20}
/>

Answer 1

您可以將按鈕作為子項傳遞給日期選擇器小部件。

兩者都使用日期選擇器小部件的 api 關閉模式。
我們可以通過分配給小部件的ref訪問 api。
取消按鈕只是將日期設置為原始^[1]日期。

const originalDate = new Date(); // or get it as prop

const [startDate, setStartDate] = React.useState(originalDate);
const calRef = React.useRef();

return (
  <DatePicker
    ref={calRef}
    selected={startDate}
    shouldCloseOnSelect={false}
    onChange={(date) => setStartDate(date)}
    showYearPicker
    dateFormat="yyyy"
    yearItemNumber={20}
  >
    <div>
      <button
        onClick={() => {
          setStartDate(originalDate);
          calRef.current.setOpen(false);
        }}
      >
        Cancel
      </button>
      <button
        onClick={() => {
          calRef.current.setOpen(false);
        }}
      >
        Apply
      </button>
    </div>
  </DatePicker>
);

https://stackblitz.com/edit/react-datepicker-footer-buttons?file=App.tsx

---

[1] original - 在你的例子中它會是今天但是如果組件接收它作為道具，它也可以