Даты MUI Datepicker для включения

Question

Если мы хотим включить определенные даты и отключить все остальные даты, как мы можем это сделать в MUI Datepicker?

Я хочу включить только даты на 7 дней позже и на 7 дней раньше, все остальные даты должны быть отключены, как мы можем этого добиться?

Я ищу что-то похожее на https://reactdatepicker.com/#example-include-dates.

Я не могу использовать реквизиты minDate и maxDate из MUI, есть ли другой вариант?

Answer 1

Вы можете использоватьshouldDisableDateопора для достижения этой цели. Вы можете найти официальный документ MUI для этого реквизита здесь . Чтобы достичь своей цели, вы можете следовать примеру ниже.

      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
   }}
/>

Вы также можете добиться этой же функции, используяminDateилиmaxDateреквизит, а также, если вам нужно. Я надеюсь, что это помогает.