carbon
carbon copied to clipboard
Sage
DateInput - minDate
Current behaviour
Updated: After closer investigation, the current date (today) is always shown in bold in the date picker popup calendar view. This is directly impacting minDate/maxDate as these lock-outs/grays out the dates that cannot be selected. When I was testing this, I so happened to have had minDate set to 26th and current date was 25th, this resulted in me seeing 25 onwards in bold which indicated that 25th is among selectable dates. So it is purely a visual bug.
Old: when DateInput is given minDate prop ie '2022-07-25', when using Date Picker selection, the calendar shows dates and 25th of July is in bold but it is not clickable at all 26th onwards dates are clickable.
Expected behaviour
DateInput's minDate should be inclusive so when given a date of 2022-07-25 it should allow user to select 25th of July. This date should be in bold style like other selectable dates, and should be selectable.
CodeSandbox or Storybook URL
https://codesandbox.io/s/carbon-date-picker-min-date-bug-b3b01f
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
109.3.3
Design Tokens Version
2.21.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
Windows
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
Hey @damianOfKyan it looks like you set the minDate to the 2022-07-26 in your demo, I've updated the sandbox and it behaves as expected so I'm closing this. Please feel free to re-open if you disagree
https://codesandbox.io/s/carbon-date-picker-min-date-bug-forked-0iql5q?file=/src/index.js
After closer investigation, the current date (today) is always shown in bold in the date picker popup calendar view. This is directly impacting minDate/maxDate as these lock-outs/grays out the dates that cannot be selected. When I was testing this, I so happened to have had minDate set to 26th and current date was 25th, this resulted in me seeing 25 onwards in bold which indicated that 25th is among selectable dates. So it is purely a visual bug.
I guess the solution would be to remove bold styling from current date so it does not conflict with minDate/maxDate visually.
@ljemmo I think Damian has a point here about the visual confusion of disabled dates and the current date in this case. It might be worth us changing to give priority to a disabled date rather than the current date?
@nicktitchmarsh Just reviewing todays date in the figma library. It looks like it should solid gray background-colour of colors.action.minor.200. If disabled, it should also use the same disabled token as the other disabled numbers: colors.action.minor.yin.030. If the todays date is active, then it should use 'colors.action.minor.yin.090' with the same background colour above.
Visual Example below:
Example of todays date active:
:tada: This issue has been resolved in version 111.12.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
