如果我们想要实现启用特定日期,而禁用所有其他日期,我们如何在MUI日期 Select 器中做到这一点?

我想只启用7天后和7天之前的日期,所有其他日期都应该被禁用,我们如何才能实现这一点?

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

我不能使用MUI中的minDate和MaxDateprops ,还有其他选项吗?

推荐答案

你可以使用shouldDisableDateprops 来达到这个目的.你可以找到这个props 的官方MUI文档超过here.为了达到您的目的,您可以遵循下面的示例?

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

如果需要,您也可以使用minDatemaxDate个props 来实现相同的功能. 我希望它能帮上忙.?

Html相关问答推荐

R中的动态Webscraping

Font Awesome 6插入符号未显示

为什么这个高度为100%的页面会出现滚动条?

将ANGLE模板高效地迁移到ANGLE 17中引入的新语法

获得一个css框,以便在页面太小时不再粘在页面的角落.

如何影响flex项目中的flex-gap收缩顺序和文本换行顺序?

Style=背景图像URL引用变成&;Quot;

如何使用 HTML 将对象数组发送到 Nodejs Express

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签,如何将其删除到手机上以使其响应?

在Firefox中使用keySplines时,SVG: <animateMotion>不起作用

CSS "overflow"不能显示整个单词

css 网格创建空行和列

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

文本溢出:省略号不适用于 flexbox

在 jinja 模板内的 html 表中嵌套 For 循环

悬停一个 div 时更改所有其他 div 上的字体 colored颜色

为什么相同持续时间的转换需要不同的时间?

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

如何使用 :hover zoom 重叠图像?

根据正则表达式 attr 从 read_html 过滤表格