Month jumping on date selection using 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!

Patronymic

Answer 1

The last version of react-date-range (14.0) add a feature to solve this problem. Just add this prop to your component.

preventSnapRefocus="disabled"

But this could show you an error message on console. The best options for me was just put

preventSnapRefocus 

(yes, puting "disabled" or nothing, the behavior is the same... weird for me)

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

Anteater

Answer 2

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.

Tingly

thank you for your answer, but I can still see that unwanted behavior in all 3 links that you provided. In the last two, I can only select a single date instead of a range. I've updated my question with video links to visualize those behaviors. – Patronymic

@BarnaTekse Oh I see! I thought you were referring to the jenky / persistent css styling of the dates that are selected. OK, let me poke at this a bit and see what I can do. – Tingly

if youre referring date was off by one day, i think you can check new Date() function as it might show you the date with the server timezone. You can try console.log the date and compare its value with your system date – Should

Answer 3

I had same issue and setting preventSnapRefocus={true} worked for me.

Conchita