Disable different month from start date in datepicker react js

Question

I want to ask about how to disable other month if they are different from the start date. So, i choose start date at "10-01-2021" other month like 02 (February) until 12 (December) will disable on datepicker. I'm so confuse how to set it on React.JS

This is my datepicker code :

 <DatePicker
              calendarClassName="tren-pembayaran__wrapper__datepicker"
              dateFormat="dd-MM-yyyy"
              placeholderText="Tahun Awal"
              selected={startDate}
              minDate={new Date("2020")}
              onChange={(date) => onStartDateChange(date)}
            />
            <DatePicker
              calendarClassName="tren-pembayaran__wrapper__datepicker"
              dateFormat="dd-MM-yyyy"
              placeholderText="Tahun Akhir"
              minDate={startDate}
              selected={endDate}
              onChange={(date) => onEndDateChange(date)}
            />

Hope you can help me. Thank you!

Answer 1

The <DatePicker> component has a maxDate property. So you need to add 1 more variable that will be updated on the startDate change and will hold the "last day of the selected month". useMemo ideally works for that.

Updates requested in comments:

For 2 modes of DatePickers you will need 2 useMemo variables. For first mode - maxDate will be the endOfCurrentMonth. For second one - endOfCurrentYear.

Additianlly added a useEffect to reset endDate when startDate changes, remove if not needed.

import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import { useEffect, useMemo, useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();
  const minStartDate = useMemo(() => {
    return new Date("2020");
  }, []);

  const startDateEndOfMonth = useMemo(() => {
    if (!startDate) return undefined;
    const lastDayOfMonth = new Date(
      startDate.getFullYear(),
      startDate.getMonth() + 1,
      0,
      23,
      59,
      59
    );
    return lastDayOfMonth;
  }, [startDate]);

  const startDateEndOfYear = useMemo(() => {
    if (!startDate) return undefined;
    const lastDayOfYear = new Date(startDate.getFullYear(), 11, 31, 23, 59, 59);
    return lastDayOfYear;
  }, [startDate]);

  useEffect(() => {
    setEndDate(startDate);
  }, [startDate]);

  return (
    <div>
      <p>THE CODE DATEPICKER BY MONTH </p>
      <>
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          showMonthYearPicker
          dateFormat="MM-yyyy"
          placeholderText="Tahun Awal"
          selected={startDate}
          minDate={new Date("2020")}
          onChange={setStartDate}
        />
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          showMonthYearPicker
          dateFormat="MM-yyyy"
          placeholderText="Tahun Akhir"
          minDate={startDate}
          maxDate={startDateEndOfYear}
          selected={endDate}
          onChange={setEndDate}
          disabled={!startDate}
        />
      </>

      <p>THE DATEPICKER BY DATE </p>
      <>
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          dateFormat="dd-MM-yyyy"
          placeholderText="Tanggal Awal"
          selected={startDate}
          minDate={minStartDate}
          onChange={setStartDate}
        />
        <DatePicker
          calendarClassName="tren-pembayaran__wrapper__datepicker"
          dateFormat="dd-MM-yyyy"
          placeholderText="Tanggal Akhir"
          minDate={startDate}
          maxDate={startDateEndOfMonth}
          selected={endDate}
          onChange={setEndDate}
          disabled={!startDate}
        />
      </>
    </div>
  );
}