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

编程问答 2022-08-12

问题描述

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

我希望它像下面一样工作

最初的开始和结束日期将为null。 用户选择开始日期（例如，十月10日）时，第一次单击时，结束日期也设置为开始日期（十月10日） 和开始日期之前的日期10月10日以及开始日期之后的6周之后的日期将被禁用 现在，当用户选择结束日期时，请说将10月13日的结束日期设置为10月13日，并且在选择结束日期后将启用禁用的日期。

现在，当用户单击10月15日时，将其设置为开始日期n结束日期 和开始日期之前的日期10月15日以及开始日期之后的6周之后的日期将被禁用 当用户单击设置为结束日期的10月17日作为结束日期，并且在选择结束日期后将启用禁用的日期。 上述作品。但是用户执行以下操作无法正常工作，为此我需要修复。 用户将开始日期设置为10月15日，将结束日期设置为10月17日，则选择开始日期为10月13日。

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

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

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

下面是我的代码的有效示例

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

有人可以帮我这个忙吗？谢谢。

解决方法

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

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

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

,

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

  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;
}
  1. 现在比较如果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

javascriptreact-datesreactjsreactjsreactjsreactjs