CODEWITHSUNDEEP
javascriptreactjsdatepickerreact-date-range
Light Yagami
Light Yagami

Reputation: 1043

How to restore separate month navigation controls for each month when using `months={2}` in `react-date-range`

I am using the react-date-range library to implement a date range picker with two calendars. The expected behavior is that both calendars should be independent of each other on the UI, with separate month navigation. Users should be able to select the start and end date from either calendar at any time.

However, with the latest version, there is only one month/year navigation at the top, and both calendars are shown side by side. The month navigation option at the top affects both calendars simultaneously, which is not the desired behavior. It currently shows the immediate next month to the option selected at the top.

How can I achieve independent month navigation for each calendar?

import { DateRange } from 'react-date-range';
  <DateRange
      ref={(c) => {
        if (c) {
          this.dialog = c;
        }
      }}
      direction="horizontal"
      months={2}
      showDateDisplay={false}
      onChange={this.onRangeChange}
      fixedHeight={true}
      ranges={[
        {
          startDate: this.state.range.startDate,
          endDate: this.state.range.endDate,
          key: 'selection',
        },
      ]}
      locale={locale}
  />

Current behaviour: enter image description here

Library used: https://www.npmjs.com/package/react-date-range

Upvotes: 1

Views: 35

Answers (1)

Smileek
Smileek

Reputation: 2797

Looks like there's no option for having two month pickers anymore since v1.0.0: https://github.com/hypeserver/react-date-range/blob/master/src/components/Calendar/index.js#L204

You can lock the old version in your package.json if you want to. It'll look like that:

"react-date-range": "0.9.4"

The best way to do that is via the package manager:

npm uninstall react-date-range
npm install [email protected]

Same goes for yarn remove/yarn add for other package managers, etc.

It's 8 years old and won't be updated, but if it doesn't contain serious bugs and works for you, then why not?

Upvotes: 0

Related Questions