如果使用反应在 prevstartdate 之前设置 startdate，如何将 enddate 设置为 null？答案

【问题标题】：How to set enddate to null if startdate is set before prevstartdate using react?如果使用反应在 prevstartdate 之前设置 startdate，如何将 enddate 设置为 null？
【发布时间】：2020-12-22 17:36:33
【问题描述】：

我想允许用户在日历上选择开始和结束日期。我正在为此使用 react-dates。

我希望它像下面那样工作

最初 start 和 enddates 将为空。当用户选择开始日期时第一次单击时说 10 月 10 日，那么结束日期也设置为开始日期（10 月 10 日）开始日期 10 月 10 日之前的日期和开始日期之后 6 周之后的日期被禁用以供选择现在，当用户选择 enddate 时，说 13th oct 结束日期设置为 13th oct，并且在选择结束日期后将启用禁用的日期。

现在当用户点击 10 月 15 日时，这被设置为开始日期 n 结束日期开始日期 10 月 15 日之前的日期和开始日期之后 6 周之后的日期被禁用以供选择当用户单击 17th oct 作为设置为结束日期的结束日期时，选择结束日期后将启用禁用的日期。上述作品。但是用户做了下面的事情，它没有按预期工作，我需要解决这个问题。用户将开始日期设置为 10 月 15 日，结束日期设置为 10 月 17 日，现在选择开始日期为 10 月 13 日。

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-dates

【解决方案1】：

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

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

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

【讨论】：

谢谢，但它不会禁用以前的日期和从 startdate 起 6 周后的日期。并且用户无法在上一个开始日期之前设置日期。
我不确定您的意思...选择 startDate 会禁用 startDate 之前和 6 周后的日期。在选择了 endDate 之后，用户可以在 startDate 之前设置日期。我不确定我是否看到接受的答案与此答案之间的行为差异，但我很高兴你找到了满足你需要的东西。
初始状态 startdate 和 enddate 未预定义。当用户选择开始日期时，它也设置为结束日期。 startdate 和 6 周前的日期被禁用。现在，当用户单击一个日期时，它将被视为结束日期。现在被禁用的日期将再次启用

【解决方案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

【讨论】：