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.
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;