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

Question

I'm using DateRangePicker from react-date-range in a next.js project.

You can see the expected behavior on their demo page : if you select any date from the month on the right, the months stay in place. Here's a video .

But in my project, the month from the right jumps to the left on date selection ( as you can see it in this video ).
I've made a simple demo here by copying code from their demo page:

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 from my demo page.
Any idea or solution to stop this behavior is welcome! Thank you!

Answer 1

This is an odd one---I'm sure someone more familiar with Next.js can update this question to flesh out exactly why this error occurs, but for now I have identified a fix and a possible explanation.

I plugged your code into a create-react-app instance and it worked fine, funny enough: Sandbox here .

I tested your same code and observed the same odd formatting. I also noticed that the dates generated by next.js were curiously not accurate ; for example, it wouldn't start with today (it was off by one date, starting the selection on 'tomorrow'; this was not the case with the create-react-app version which accurately started the initial selection) so something is up with the rendering. My best guess: next.js may not be re-rendering the <DateRangePicker /> and/or its css values (or the component in general?)---at least not when the component is initialized?---so I injected the initial data selection on load with useEffect and added a stringified version of the state as a key to the container div to force a re-render and it no longer displays the odd selection 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>
  );
}

And it worked: Sandbox , demo page .