禁用所有天之前和之后的日期

Question

我试图限制用户能够使用react day picker从非常小的日期范围中进行选择。之前和之后的所有其他日期都应该禁用，以防止它们被选中。下面是我的带有props的DateRange组件，它将值作为字符串传递，例如2022-07-15。方法我已经尝试从一些之前的问题,也许我实现它错了吗?

const DateRange = (props) => {
return (
<DayPicker
mode="single"
disabledDays={{ before: new Date(props.startdate), after: new Date(props.enddate) }}
/>
);

};

然而，没有日期被视觉禁用(灰色)，用户仍然可以选择任何日期。任何帮助，如何纠正这将是非常感激!

Answer 1

我做了一个沙盒，这是你所期望的吗?

export default function App() {
function _DayPicker({ before, after }) {
const afterMatcher: DateAfter = { after };
const beforeMatcher: DateBefore = { before };
const disabledDays = [afterMatcher, beforeMatcher];
return (
<DayPicker
defaultMonth={new Date(2022, 5, 10)}
disabled={disabledDays}
mode="single"
/>
);
}
return (
<_DayPicker before={new Date(2022, 5, 10)} after={new Date(2022, 5, 28)} />
);
}