• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

104
Views
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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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;
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error