feat(ADatePicker): style date range on hover when choosing an end date

[brennarvo]

Please check if the PR fulfills these requirements

• The commit message follows semantic commit message guidelines
• The changes are documented in component docs and changelog
• The ESLint plugin has been updated if a new component is added
• Test have been added or modified, if appropriate
• Has been verified locally

What kind of change does this PR introduce?

Closes #1167 and adds styling for date picker range variants.

What is the current behavior?
Overlapping days in ranges spanning multiple months are not being highlighted, making it unclear which date range has been selected. Example:
Start date: May 18, 2022
End date: June 8, 2022

After clicking June 8, the month of June properly highlights June 1st through June 8th, but does not indicate that May 29 through May 31 (the previous month where the starting date exists) are also part of the newly created range.

Additionally, after selecting the starting date, there is no styling to suggest what range would be created when hovering over a potential end date candidate. This can be confusing to a user who is not sure how the date range is actually being created based off their selections.

What is the new behavior (if this is a feature change)?

Highlights all days of a date range, regardless of if the days are in previous/future months in the currently displayed month/year UI, as well as the hypothetical range that would be created when hovering an end date:

Does this PR introduce a breaking change?

No

Other information:

Another alternative to this is to remove the days in the calendar that do not correspond with the following month being shown in the calendar UI. In the examples above, it would mean the slots for May 29 - May 31 would be empty.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
atomic-react	✅ Ready (Inspect)	Visit Preview	May 16, 2022 at 2:28PM (UTC)