Date selection
Variants
- Single date selector
- Date range selector
Default behaviour
Options currently considered:
- Placeholder text (i.e.
DD/MM/YYYYorMM/DD/YYYYdepending on preference detected from browser- Which do we default to if no preference is detected?
- Default date range
- Do we need to standardise what this default date range might be across the Platform?
Input behaviour
Automatically tab users through the fields of the date input --> are we sure about this? it opposes GDS guidelines
Calendar view
Default date ranges
Receiving input
The dates selected should be assumed to be based on the user's time zone and the output reflected accordingly. i.e. If they user in California selects "Today" and it is 7 January in their location but 8 January based on UTC, we will reflect results from 7 January.
Validation
Selecting a date range where the start date is after the end date --> what happens?
Unavailable dates --> Users are not able to select dates marked as unavailable. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. The isDateUnavailable prop accepts a callback that is called to evaluate whether each visible date is unavailable. (taken from Adobe Spectrum documentation, please sense-check.)
Date ranges that contain unavailable dates --> Users are not able to select non-contiguous ranges, i.e. ranges that contain unavailable dates within them.
Typing a date that does not exist e.g. 31/02/2024 --> what happens?
Calendar behaviour
Selecting a date range where the start date is after the end date --> what happens?
Selecting a date range where the start date is after the end date --> what happens?
Selecting a disabled date --> what happens? Is there such a case?
Date display
Display format (DD/MM/YYYY vs MM/DD/YYYY) will be determined by user's browser preferences and reflected in the placeholder text in the empty state