1

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?

Viraj Khatri
  • 380
  • 2
  • 10

1 Answers1

2

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.

Simran Singh
  • 2,323
  • 12
  • 21