Fix hovering issue in the date range component

[metas-rc]

Type of issue

• Bug

Current behavior

• When using a date range component ( a filter) the following happens:
  ** The firstdate is selected => both the dateFrom and dateTo fields are set with this date : OK
  ** The second date is selected => both the dateFrom and dateTo fields are set with this date : NOK
  ** If you hover on other dates, the first date is also modified in the field: NOK
• This might be confusing from a user perspective

Expected behavior

• Since the first date was set, leave the date Field value as is .

Steps to reproduce

Step 1: Selected first date as February 1:

Step 2: decided to set the second date on March 3:

Step 3: Clicked on March 3:

Step 4: Move the cursor to March 10:

Step 5: Move the cursor out of the date component ( all back to normal):

Is this easy to fix?
Please let us know about the complexity of fixing this.

[damianprzygodzki]

First, it is not easy to fix, it is a totally different behavior than that one.
Second, the current behavior is as every date range picker is doing, it is to selecting range, and do not chosing two dates separetely.

[cadavre]

This is how used library works: http://www.daterangepicker.com/

It's not perfect because it doesn't enable you to change once selected date on left and right sides of calendar. In fact this is not "input and calendar" + "input and calendar" but "input + input and calendar".

What I suggest to do is: enable autoApply – it will close picker after selection of 2nd date, and to change dates you'd need to open it one more time and select new range.

OR

Disable inputs for dates – this will leave only calendar to select from and to. But this will on the other hand disable possibility to see dates at once first next to other.

Both are not perfect but you can decide:

1. Leave as is
2. Use autoApply with clear on click.
3. Disable inputs.

I would say #2 will not confuse user.

[teosarca]

closing because it seems there is no solution for now.