Overview
Similar to the date range selector component, the date and time picker allows users to select a single date and/or time as needed within a mobile app.
Key Features
The condensed view represents one half of the date/time picker component. The time and date condensed input can be shown together or just by themselves.
- For time inputs the “clock” icon is shown, while for date inputs the calendar icon is shown. These are fixed icons that can’t be changed.
- Designers can configure the time input to either be in a 12-hour range (AM/PM) or be in a 24-hour range.
- The labels for each input change to the options that have been selected by the user.
Similar to the date range selector, the date/time picker is nested within the medium sized sheet w/ a shroud, as well as being composed in a similar manner (shortcut group, ghost button, calendar element and button group).
When using just the time picker, designers can chose between a dropdown like time wheel that overlays over the contents of the page or a nested time wheel thats contained in an expanded card element.
Usage
Always use the shroud when using the expanded date picker.
Avoid using the date/time picker without the shroud element as to avoid overloading users.