He estado luchando para que maxDate prop en el componente Material UI DatePicker funcione como se esperaba. Es decir, las fechas posteriores a maxDate están deshabilitadas.
Mi caso de uso requería establecer maxDate en +60 days a partir de la Date() con las fechas posteriores deshabilitadas.
Por favor, vea mi respuesta para una solución que está funcionando en mi extremo.
Mi solución de trabajo a través CodeSandbox se encuentra aquí .
Si prefiere el código en lugar de 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;