在打開日期選擇器的同時添加月份和年份轉換器

Question

我將 react-datepicker 用作 package 用於日期選擇器目的 ( https://www.npmjs.com/package/react-datepicker )。 是否有一個選項可以讓我們為范圍選擇器的末端設置樣式。 我還希望年月選擇器在打開時作為日歷的一部分。 這是可以實現的嗎？

沙盒： https://codesandbox.io/s/date-picker-example-forked-ns0hbg?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const App = () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

這些是您可以在 DatePicker lib 組件中顯示月份下拉、使用 ShortMonthInDropdown、showMonthYearDropdown、showYearDropdown 的一些道具。 像

 <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      showYearDropdown
    />

有關更多示例，您可以訪問可能最適合您的 senario 的鏈接。 https://reactdatepicker.com/

Answer 2

請試試這個，我檢查了 codesandbox 鏈接，前提是下面提到的代碼工作正常。

const onChange = (dates, e) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
    e.stopPropagation();
  };

  return (
    <DatePicker
      format="yyyy-MM-dd"
      selected={startDate}
      minDate={new Date()}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      showMonthDropdown
      showYearDropdown
      scrollableYearDropdown
      yearDropdownItemNumber={50}
      dropdownMode="select"
    />
  );
};