Minimum & Maximum Date

There are many cases where you want to somehow limit the user to choose a day in a appropriate range. That's when minimumDate and mximumDate props come in handy. Here are some examples:

Limiting from Today

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar, utils } from "react-modern-calendar-datepicker";

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);
  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      minimumDate={utils().getToday()}
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

Specifying Both Minimum and Maximum

import React, { useState } from "react";
import "react-modern-calendar-datepicke/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicke";

const App = () => {
  const defaultValue = {
    year: 2019,
    month: 4,
    day: 15
  };

  const minimumDate = {
    year: 2019,
    month: 4,
    day: 10
  };

  const maximumDate = {
    year: 2019,
    month: 4,
    day: 21
  }

  const [selectedDay, setSelectedDay] = useState(
    defaultValue
  );
  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS