Overview
Within our mobile apps, we support the selection of different types of time. From single points of hour and dates along with the selection of date ranges. While our date range selection is a purely custom styled element, the time and date pickers make use of a combination of nativeOS elements and custom styled elements.
Below is a breakdown of hour selection, singular date selection and the choosing of a date range along with the interactions and use cases for each of these.
Hour Selection
The selection of hour is handled through a combination of both system based elements and custom styled components. Across Android and iOS, time is visualized through the “condensed” view which showcases a point of time in both the 24-hour and 12-hour perceptive (further information on this here).
When active, a time is selection through the respective system element (iOS guidance here and Android guidance here).
- Condensed view
- Expanded, system dependent element, view
Date Selection
Similar to the method in which hour is shown, a singular date is visualized in a “condensed view”. This is shown in the order of month, day and year.
When selected by the user, a calendar view which is nested in the medium sized sheet, allows for users to pick a singular date (further documentation on this view here).
- Condensed view
- Expanded view, with a calendar UI, nested in the medium sized sheet.
Date Range
Currently there is only one feature in our mobile suite that leverages the date range functionality, with this being in the schedule tab in Tempo. In this area the date range functionality is nested in the top bar navigation.
The date range component is comprised by two parts: “condensed” state and the “expanded” view. Both of these variants are similar to the date picker, albeit with additional functionalities to support (more on this here).
- Condensed view
- Expanded view, with a calendar UI, nested in the medium sized sheet.
