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

Question

我想允许用户选择日历上的开始和结束日期。我使用的是反应日期。

我希望它像下面这样工作

初始开始日期和结束日期将为空。当用户选择开始日期（如10月10日）时，第一次单击时，enddate也设置为startdate（10月10日），并且开始日期（10月10日）之前的日期和从开始日期算起6周后的日期将被禁用，现在当用户选择enddate（如10月13日）时，enddate设置为13th oct，并且在选择结束日期后将启用禁用的日期。

现在，当用户单击10月15日时，这被设置为开始日期n结束日期，开始日期之前的日期10月15日和开始日期后6周的日期被禁用以供选择，当用户单击10月17日作为设置为结束日期的结束日期时，禁用的日期将在选择结束日期后启用。上述工作。但用户执行以下操作，它无法按预期工作，我需要对此进行修复。用户将开始日期设置为10月15日，结束日期设置为10月17日，现在选择开始日期10月13日。

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

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

基本上，当用户设置了一些开始和结束日期并选择了开始日期之前的日期时，结束日期应设置为新的开始日期，而新的开始日期之前的日期和从新的开始日期起6周后的日期应被禁用。用户单击startdate之后的另一个日期应设置为结束日期。

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

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

谁能帮我一下吗。谢谢

Answer 1

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

1. 开始日期和结束日期都已设置，并且相等。在这种情况下，您知道您实际上只选择了开始日期，应该对可用范围进行限制。选择有效日期后，仅设置结束日期

下面是一个如何实现它的例子：https://codesandbox.io/s/react-dates-forked-9rj7q?file=/src/index.js

Answer 2

我认为您可以简单地使用useEffects来完成。为此您需要两件事：

1. 第一个轨迹开始日期值如果值已从开始日期更改，则表示您再次选择了开始日期，您可以为其创建自定义上一个挂钩：

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

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