如果使用 react 在 prevstartdate 之前设置了 startdate，如何将 enddate 设置为 null？

Question

我想允许用户 select 日历上的开始和结束日期。我正在为此使用反应日期。

我希望它像下面这样工作

最初开始和结束日期将为空。第一次点击时用户 select 的开始日期是 10 月 10 日，然后结束日期也设置为开始日期（10 月 10 日）和开始日期 10 月 10 日之前的日期以及从开始日期起 6 周之后的日期不能进行选择现在，当用户 select 的结束日期说 10 月 13 日结束日期设置为 10 月 13 日时，禁用的日期将在 select 结束日期后启用。

现在，当用户点击 10 月 15 日时，这将设置为开始日期和结束日期和开始日期 10 月 15 日之前的日期以及从开始日期起 6 周之后的日期不能进行选择当用户单击 10 月 17 日作为结束日期时，设置为结束日期，禁用的日期将在 selecting 结束日期后启用。上述作品。但是用户执行了以下操作，但它没有按预期工作，我需要对此进行修复。用户现在将开始日期设置为 10 月 15 日，结束日期设置为 10 月 17 日 selects 开始日期为 10 月 13 日。

预期： 此时我希望它将开始和结束日期设置为 10 月 13 日并禁用 10 月 13 日之前的日期以及 10 月 13 日 6 周后的日期也是禁用并等待用户输入结束日期。

结果但它将 10 月 13 日设置为开始日期，将 10 月 17 日设置为结束日期。

基本上当用户设置了一些开始和结束日期并且 selects 是开始日期之前的日期时，结束日期应该设置为新的开始日期，新开始日期之前的日期和 6 周之后的日期从新的开始日期应该被禁用。并且用户在开始日期之后点击另一个日期应设置为结束日期。

下面是我的代码的工作示例

https://codesandbox.io/s/react-dates-forked-skrj2?file=/src/index.js

有人可以帮我解决这个问题吗？谢谢。

Answer 1

如果我理解你想要的是正确的，你基本上有两个条件：

startDate和endDate都设置好了，而且是相等的。在这种情况下，您知道您实际上只选择了 startDate，并且应该对可用范围施加限制。选择有效日期时，仅设置 endDate
所有其他情况。这里，你应该把startDate和endDate设置成相同的值，并且没有限制。这包括初始条件（均为 null）和您已明确设置单独的 endDate.

以下是如何实现此功能的示例： https://codesandbox.io/s/react-dates-forked-9rj7q?file=/src/index.js

Answer 2

我想你可以简单地使用 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

如果使用 react 在 prevstartdate 之前设置了 startdate，如何将 enddate 设置为 null？

How to set enddate to null if startdate is set before prevstartdate using react?

javascript

reactjs

react-dates