Variants
Example of Date time input - default
<div className='bc-form__group'> <label className='bc-label' htmlFor='date'> Pick a date </label> <div className='bc-date-time-input'> <input className='bc-text-input' id='date' name='date' type='date' /> </div> </div>
React documentation
Last modified:
TODO: Introduce a new <BcDateTimeInput /> react component and migrate.
HTML
Last modified:
Allows users to set dates and times. Combine together for setting ranges.
Defaults
By default a calendar icon is shown.
The --time variant is available to show a clock icon instead.
Known browser differences
In addition to differences between the native menu pickers and spinners, on desktop:
| Browser | Date field focus | Date field click | Date button | Time field focus | Time field click | Time button | Dirty behavior |
|---|---|---|---|---|---|---|---|
| Chrome | Text | Text | Picker UI | Text | Text | Picker UI | |
| Edge | Text | Text | Picker UI | Text | Text | Picker UI | |
| Safari | Text | Picker UI | Text | Text | |||
| Firefox | Text | Text | Picker UI | Text | Text |
The component automatically handles mobile support, using their touch-based native spinners.
Design
Last modified:
These are sizing and layout variants:
| Variant | Purpose |
|---|---|
.bc-date-time-input--block | Takes entire block width. |
.bc-date-time-input--disabled | Makes date time input disabled. |
.bc-date-time-input--time | Shows clock icon instead of default calendar icon. |
Accessibility
Last modified:
This component uses native HTML5 date and time inputs.
Its core mouse, touch, keyboard and screen reader support is excellent.
Note: ::placeholder does not exist for this feature.
Note the extended functionality differs slightly — see Known browser differences below.
Rationale
Last modified:
Native HTML5 date and time inputs have a good browser support and losing some control over the styles of the open picker menu UI is acceptable given the many benefits gained.
The benefits:
- HTML5 native date and time inputs have good native support, in many cases exceeding that of third-party JS pickers
- The usability and accessibility exceeds that of many third-party JS pickers
- Mobile support is superior to most third-party JS pickers
- Automatically uses local date and time preferences
- KISS and don’t re-invent the wheel.
The downsides:
- Minor browser inconsistencies
- Lack of control in styling the picker menu
- No inbuilt range support.
See also
Last modified:
- text-input (Forms)