我希望允许用户选择日历上的开始和结束日期。我使用的是react日期。
我希望它能像低于一样工作
最初的开始日期和结束日期将为null。第一次点击时，用户选择开始日期，比如10月10日，那么结束日期也设置为开始日期(10月10号(开始日期10月10日之前的日期和开始日期6周之后的日期被禁用以供选择现在，当用户选择结束日期时，比如10月13日结束日期设置为10月13号，并且在选择结束日期后将启用被禁用的日期。
现在，当用户单击10月15日时，它被设置为开始日期n结束日期开始日期10月15日之前的日期和开始日期后6周之后的日期被禁用以供选择当用户单击设置为结束日期的10月17日作为结束日期时，在选择结束日期后将启用禁用的日期。上述作品。但用户做了以下操作，它没有按预期工作，我需要对此进行修复。用户将开始日期设置为10月15日，结束日期设置为8月17日，现在选择开始日期10月13日。
预期：在这一点上，我希望它将开始和结束日期设置为10月13日，并禁用10月13号之前的日期和10月13日起6周后的日期，并等待用户输入结束日期。
结果，但它将10月13日设置为开始日期，将10月17日设置为结束日期。
基本上，当用户设置了一些开始和结束日期并选择了开始日期之前的日期时，结束日期应设置为新开始日期，并且应禁用新开始日期之前和新开始日期后6周之后的日期。并且用户点击开始日期之后的另一个日期应该被设置为结束日期
下面是我的代码的工作示例
https://codesandbox.io/s/react-dates-forked-skrj2?file=/src/index.js
有人能帮我做这个吗。谢谢
我认为您可以简单地使用useEffect。你需要两件事：
- 第一个跟踪开始日期值如果值从开始日期更改，则意味着您再次选择了开始日期，您可以创建自定义的上一个挂钩：
// The ref object is a generic container whose current property is mutable ...
// ... and can hold any value, similar to an instance property on a class
const ref = useRef();
// Store current value in ref
useEffect(() => {
ref.current = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
return ref.current;
}
- 现在进行比较，如果prevDate不等于新的开始日期，则表示值已更改。更新结束日期。为此，您需要
React.useEffect
const prevDate = usePrevious(startDate);
React.useEffect(() => {
if (prevDate && !moment(prevDate).isSame(startDate)) {
setEndDate(startDate);
}
}, [startDate, endDate, prevDate]);
您可以在此处找到演示：https://codesandbox.io/s/react-dates-forked-xz0pk?file=/src/index.js:2469-2668
如果我能正确理解你想要什么，你基本上有两个条件：
startDate和endDate都已设置，并且相等。在这种情况下，您知道您实际上只选择了一个startDate，并且应该对可用范围施加限制。选择有效日期时，仅设置endDate- 所有其他情况。在这里，您应该将
startDate和endDate设置为相同的值，并且不施加限制。这涵盖了初始条件(均为null(和显式设置单独endDate的情况
以下是如何实现此功能的示例：https://codesandbox.io/s/react-dates-forked-9rj7q?file=/src/index.js