MUI Datepicker dates to include

Question

If we want to achieve to enable specific dates, and disable all other dates, how can we do that in MUI Datepicker?

I want to enable only dates from 7 days later and 7 days earlier, all other dates should be disabled, how can we acheive that?

I am looking for something similar to https://reactdatepicker.com/#example-include-dates.

I cannot use minDate and maxDate props from MUI, is there any other option?

Answer 1

You can use shouldDisableDate prop to achieve this. You can find the official MUI doc for this prop over here. To serve your purpose you can follow the example below 👇

import { DatePicker } from '@mui/x-date-pickers/DatePicker'

<DatePicker
   label="My date picker"
   shouldDisableDate={(date: any) => {
      const today = new Date()
      const sevenDaysBefore = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7)
      const sevenDaysAfter = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7)
      // Disable all dates before or after 7 days from today.
      return date < sevenDaysBefore || date > sevenDaysAfter
   }}
/>

You can also achieve this same feature by using minDate or maxDate props as well if you need to. I hope it helps. 😊