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

Posted 2023-02-21

【中文标题】使用 react-date-range 进行日期选择的月份跳跃

【英文标题】：Month jumping on date selection using react-date-range

【发布时间】：2021-04-26 23:44:00

【问题描述】：

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

您可以在他们的demo page 上看到预期的行为：如果您从右侧月份中选择任何日期，月份将保持不变。 Here's a video.

但在我的项目中，在日期选择 (as you can see it in this video) 时，右侧的月份会跳到左侧。 我通过从他们的演示页面复制代码制作了一个简单的demo here：

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>
  );

Here you can see the code 来自我的演示页面。 欢迎任何阻止这种行为的想法或解决方案！谢谢！

【参考方案1】：

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

我将您的代码插入到 create-react-app 实例中，它运行良好，很有趣： Sandbox here.

我测试了您的相同代码并观察到相同的奇怪格式。我还注意到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>
  );

它成功了：Sandbox、demo page。

【讨论】：

感谢您的回答，但我仍然可以在您提供的所有 3 个链接中看到不需要的行为。在最后两个中，我只能选择一个日期而不是一个范围。我用视频链接更新了我的问题，以可视化这些行为。

@BarnaTekse 哦，我明白了！我以为您指的是所选日期的 jenky/persistent css 样式。好的，让我稍微戳一下，看看我能做什么。

如果您的参考日期差了一天，我认为您可以检查new Date() 函数，因为它可能会显示服务器时区的日期。您可以尝试console.log 日期并将其值与您的系统日期进行比较