在打开日期选择器的同时添加月份和年份转换器

Question

I am using react-datepicker as the package for date picker purposes ( https://www.npmjs.com/package/react-datepicker ). Is there an option we could style the ends of the range picker. Also I want the year and month picker as a part of calendar when it is opened. Is this achievable?

Sandbox: 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

These are some props that you can to showMonthDropdown,useShortMonthInDropdown,showMonthYearDropdown,showYearDropdown in the DatePicker lib component. like

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

For more example you can visit this link that might be best for your senario. https://reactdatepicker.com/

Answer 2

Please try this, I checked in the codesandbox link provided the code mentioned below is working fine.

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