search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
105 stars 38 forks source link

Date picker: Days outside of current month are not given correct styling #1299

Closed SpencerWBarnes closed 8 months ago

SpencerWBarnes commented 1 year ago

Describe the bug (actual behavior)

Selecting date ranges across month borders results in the portion of the selection range outside the currently displayed month to be hidden. I believe this extends to the "today" indicator as well.

Expected behavior

The current day, selected start and end dates of a range, and the days within that range should show both an indication of their role/status and an indication of being outside the selected month.

Reproduction

Link to a minimal repro: https://codesandbox.io/s/peaceful-platform-bor0tg?file=/src/App.tsx

Steps to reproduce
  1. Open minimal repro
  2. Observe that the range appears to be cut-off at the ends of the months

Additional information

This logic is from the getDayClass method at line 524 which only allows for one class to be applied and prioritizes a day's outside the month status above all other statuses. Allowing the method to return both the outside the month and date range classes looked promising but results in strange onHover coloring and overpowering the muted color of the text making it harder to see that a day was outside the month.

mayank99 commented 1 year ago

@FlyersPh9 Do you remember if we decided whether these dates should have selected+unavailable styling or if current behavior is intentional?

We could show the blue background at reduced opacity, but it would have issues with color contrast.

SpencerWBarnes commented 1 year ago

it would have issues with color contrast.

Perhaps they could have a hollow styling for each square or the blue appears as a bar on top and bottom to give it a hollow middle band?

FlyersPh9 commented 1 year ago

I would be ok with @mayank99 suggestion of a lighter selection color. An alternative solution is to not show dates outside of the month.

FlyersPh9 commented 9 months ago

We have decided for multiple reasons that we will stop showing dates outside of the current month. This should help avoid the issue at hand.

We are also going to mark the date range picker using a singular input as deprecated and plan to offer a replacement solution in the next major release planned for 2025. We recommend for accessibility reasons to use 2 inputs, 1 for start & 1 for end date.

mayank99 commented 8 months ago

In 3.4.0, we've added a new prop showDatesOutsideMonth which we recommend setting to false. (It defaults to true to avoid a breaking change)

In a future release, we will deprecate enableRangeSelect.