Date and Time Input

Related: date and time

• open-ui.org/components/datepicker.research

HTML supports the following date(time) types in an input field [MDN].

• date [MDN]
• datetime-local [MDN]
• month [MDN]
• week [MDN]
• time [MDN]

The showPicker() method opens the picker UI of an input field [MDN].

Browser may allow to clear the date selection or parts of it. Firefox does not provide a discoverable way to reset date/time inputs. But they can be cleared with Cmd+Backspace and Cmd+Delete shortcut on macOS and Ctrl+Backspace and Ctrl+Delete on Windows and Linux. [mozilla.org]

The native date and time pickers may have usability problems (which may be different depending on the operating systems) [gist.github.com]. Depending on the exact use case and target audience, it may be better to use separate input fields instead of a date picker [design-system.service.gov.uk, designsystem.digital.gov].