Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-daypicker): date selection range light blue indication #6836

Merged
merged 3 commits into from
Apr 4, 2023

Conversation

kieransukachevin
Copy link
Contributor

@kieransukachevin kieransukachevin commented Mar 30, 2023

Background

When selecting a date range in the Calendar with selection mode Range, if you select a new start date (and thus have only one date selected), a range of dates have their background color set to light blue indicating they are in the selected date range. This is incorrect since there is only one date selected and therefore no date range yet.

Issue

The problem is that the DayPicker that the Calendar implements has a property called _secondTimestamp that keeps track of the current date that the mouse is hovering (for selection mode Range). When a single date is selected, this allows the DayPicker to update the dates between the selected date and the current date hovered by the mouse (or focused) to have a light blue background color. DayPicker also updates _secondTimestamp to the timestamp property, which is the current selected date, when only one date was previously selected and a new date is selected. But when two dates were previously selected and a new date is selected, _secondTimestamp is not updated to timestamp. Thus, when two dates were previously selected and a new date is selected, dates between the new date and _secondTimestamp which did not update to the new date are marked in light blue.

  • Calendar with selection mode Range in test page.
    Screen Shot 2023-03-30 at 2 42 11 PMScreen Shot 2023-03-30 at 2 42 15 PMScreen Shot 2023-03-30 at 2 42 20 PMScreen Shot 2023-03-30 at 2 42 27 PM
  • 15 is selected first, then 8. Then, when the new date 21 is selected, dates 9 (which is the value of _secondTimestamp due to 9 being the last date hovered before a second date was chosen) to 20 are light blue.

Change

In order to fix this, _secondTimestamp needs to be updated to the current timestamp property when a new start date is selected. This is done by changing the _updateSecondTimestamp method (called when a new date is selected) to update the _secondTimestamp to the current timestamp when there were previously two dates already selected. Previously, _updateSecondTimestamp only updated _secondTimestamp to the current timestamp when there was previously one date already selected.

  • Fixed Calendar with selection mode Range in test page.
    Screen Shot 2023-03-30 at 2 42 54 PMScreen Shot 2023-03-30 at 2 43 00 PMScreen Shot 2023-03-30 at 2 43 07 PMScreen Shot 2023-03-30 at 2 43 17 PM
  • 15 is selected first, then 8. Now, when the new date 21 is selected no other dates are light blue.

Fixes #6781

Pull Request Checklist

@ilhan007 ilhan007 merged commit d16cf33 into SAP:main Apr 4, 2023
didip1000 pushed a commit that referenced this pull request Apr 4, 2023
When selecting a date range in the Calendar with selection mode Range, if you select a new start date (and thus have only one date selected), a range of dates have their background color set to light blue indicating they are in the selected date range. This is incorrect since there is only one date selected and therefore no date range yet.

Fixes #6781
NHristov-sap pushed a commit that referenced this pull request May 4, 2023
When selecting a date range in the Calendar with selection mode Range, if you select a new start date (and thus have only one date selected), a range of dates have their background color set to light blue indicating they are in the selected date range. This is incorrect since there is only one date selected and therefore no date range yet.

Fixes #6781
PetyaMarkovaBogdanova pushed a commit that referenced this pull request Jun 20, 2023
When selecting a date range in the Calendar with selection mode Range, if you select a new start date (and thus have only one date selected), a range of dates have their background color set to light blue indicating they are in the selected date range. This is incorrect since there is only one date selected and therefore no date range yet.

Fixes #6781
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Calendar - Range Selection “remembers” previous interval end
3 participants