CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Eric
Eric

Reputation: 2849

Setting maxDate in Material UI DatePicker Component

I have been struggling to get the maxDate prop on the Material UI DatePicker component to work as expected. That is, dates after the maxDate are disabled.

My use case required setting the maxDate to +60 days from the current Date() with dates thereafter disabled.

Please see my answer for a solution that is working on my end.

Upvotes: 1

Views: 519

Answers (1)

Eric
Eric

Reputation: 2849

My working solution via CodeSandbox found here.

If you prefer the code instead of CodeSandbox:

index.js

import React from "react";
import App from "./App.jsx";
import DateFnsUtils from "@date-io/date-fns";
import { render } from "react-dom";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import "./App.css";

render(
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <App />
  </MuiPickersUtilsProvider>,
  document.querySelector("#root")
);

App.jsx

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns";
import moment from "moment";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function App() {
  const dayjs = require("dayjs");
  const [selectedDate, handleDateChange] = useState(new Date());

  // function for setting the maxDate for DatePicker
  // return value is current date + X days
  const setMaxDate = (daysToAdd) => {
    const now = new Date();
    const nowPlusDays = now.setDate(now.getDate() + daysToAdd);
    return moment(dayjs(nowPlusDays).format("YYYY-MM-DD"));
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        value={selectedDate}
        onChange={handleDateChange}
        maxDate={setMaxDate(60)}
      />
    </MuiPickersUtilsProvider>
  );
}

export default App;

Upvotes: 1

Related Questions