Date Range component

[metagrover]

Bug Report

Current behavior:

• Incorrect range selection

If you have an end-date selected (screenshot - 2018-02-14), and clear the start-date, you will be able to select any date in the calendar as the start-date, even the dates after 2018-02-14.

Also, if I have an end date selected, and I'm selecting the start date, the calendar should grey-out irrelevant dates (i.e. the dates after the end date)

• UX issues

  • Currently, the component does not tell you in any way which date are you selecting at any given point. (i.e. you won't know if you're selecting an end-date or a start-date)
  • The range selection isn't continuous. Calendar closes after selecting the start-date and you will have to click the end-date input field to open the calendar again to select the end date.

• Support more Customization

Allow users to change the middle -'s markup which connects two input fields together. Possible usecase: You may want to change the - to an arrow (->) or to.

Expected / new behavior:

• To improve the UX, we can highlight the range while selecting and keep the calendar open until the user is done selecting both the dates.

Reactivesearch version: latest

[siddharthlatest]

In the possible customizations support, it should be possible to change the entire top portion including the input fields.

An example from Airbnb.

Another example from Kayak.

[metagrover]

For custom rendering, we can use onDayChange from react-day-picker to expose the current selection and render as we please with a custom trigger to open the calendar view.

[metagrover]

UX Issues:

When the date range is already selected, and now you modify the start date such that (end date - start date > 1 month duration), the calendar auto-focuses on the end date.

Correct behavior: It should focus on the start date if you are changing the start date. It should focus on the end date if you are changing the end date.