MUI 日期选择器要包含的日期

Question

如果我们想实现启用特定日期，禁用所有其他日期，在MUI Datepicker中如何实现？

我只想启用 7 天后和 7 天前的日期，所有其他日期都应禁用，我们如何实现这一点？

我正在寻找类似的东西https://reactdatepicker.com/#example-include-dates。

我无法使用 MUI 中的 minDate 和 maxDate 属性，还有其他选择吗？

Answer 1

您可以使用

shouldDisableDate

道具来实现此目的。您可以在here找到此道具的官方 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

道具来实现相同的功能。 我希望它有帮助。