使用react-date-range进行日期选择的月份跳跃

Question

我在 next.js 项目中使用 react-date-range 中的 DateRangePicker。

您可以在他们的演示页面上看到预期的行为：如果您从右侧的月份中选择任何日期，月份将保持不变。 这是视频。

但在我的项目中，在选择日期时，从右侧的月份会跳到左侧（如您在本视频中看到的）。
我通过从演示页面复制代码制作了一个简单的演示：

import { addDays } from "date-fns";
import { useState } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file

export default function IndexPage() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection"
    }
  ]);

  return (
    <div>
      <h1>Hello</h1>
      <DateRangePicker
        onChange={(item) => setState([item.selection])}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={state}
        direction="horizontal"
      />
    </div>
  );
}

在这里您可以看到我的演示页面中的代码。
欢迎任何阻止这种行为的想法或解决方案！谢谢！

Answer 1

react-date-range的最后一个版本（14.0）添加了一个功能来解决这个问题。只需将此道具添加到您的组件中即可。

preventSnapRefocus="disabled"

但这可能会在控制台上显示错误消息。对我来说最好的选择已经被列出了

preventSnapRefocus 

（是的，输入“禁用”或什么都不输入，行为是相同的......对我来说很奇怪）

https://github.com/hypeserver/react-date-range/blob/master/CHANGELOG.md

Answer 2

这是一个奇怪的问题——我确信更熟悉 Next.js 的人可以更新这个问题，以充实确切地为什么会出现此错误，但现在我已经确定了一个修复程序和一个可能的解释。

我将你的代码插入到一个

create-react-app

实例中，它工作得很好，很有趣： 这里是沙盒。

我测试了您相同的代码并观察到相同的奇怪格式。我还注意到

next.js

生成的日期奇怪地不准确；例如，它不会从今天开始（它已经关闭了一个日期，在“明天”开始选择；准确地开始初始选择的

create-react-app

版本不是这种情况），因此渲染。我最好的猜测：

next.js

可能不会重新渲染

<DateRangePicker />

和/或其 css 值（或一般的组件？）——至少在组件初始化时不会？——所以我注入了使用

useEffect

加载时初始数据选择，并添加状态的字符串化版本作为容器 div 的键以强制重新渲染，并且不再显示奇怪的选择 css:

import { addDays } from "date-fns";
import { useState, useEffect } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file

export default function App() {
  const [state, setState] = useState([]);

  useEffect(() => {               {/* <---- useEffect to update state on init */}
    if (state.length === 0) {
      setState([
        {
          startDate: new Date(),
          endDate: addDays(new Date(), 7),
          key: "selection"
        }
      ]);
    }
  }, [state, setState]);

  return (
    <div key={JSON.stringify(state)}>     {/* <-- added key here, to force rerender */}
      <h1>Hello</h1>
      <DateRangePicker
        onChange={(item) => setState([item.selection])}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={state}
        direction="horizontal"
      />
    </div>
  );
}

它有效：沙盒，演示页面。

Answer 3

我有同样的问题和设置

preventSnapRefocus={true}

对我有用。