CODEWITHSUNDEEP
htmlreactjsmaterial-uidatepickermui-x-date-picker
Viraj Khatri
Viraj Khatri

Reputation: 400

MUI Datepicker dates to include

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?

Upvotes: 1

Views: 909

Answers (1)

Simran Singh
Simran Singh

Reputation: 2899

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

Upvotes: 3

Related Questions