Time Picker
Time Pickers allow users to enter a time by selecting a value (hour, minute, AM/PM) from a popup.
Note
Our Time Picker makes use of the native iOS compact style Time Picker to take advantage of the most familiar and expected time selection experience for our users. All behaviors and interactions follow the default native iOS guidelines.
Usage Guidance
- The Time Picker is made up of both an input and a picker.
- The Time Picker allows the selection of a single time, while the input invokes the picker and then displays the user’s selection.
- The Time Picker defaults to the standard selection based entry method but also provides the option of a keyboard based entry.
When to Use
- When a normal time value (hour, minute, AM/PM) is needed.
When to Consider Something Else
- If a determinate time frame is needed (ie. 30 minutes, 2 hours or 6 days) use another selection based input, either a prompt, checkbox, radio or wheel.
- If an indeterminate time frame is needed use a text or number input.
Refer to the iOS guidelines on the compact Time Picker for more information.
API Guidelines
Methods
Class name: LabelledTimePicker Module name: UIComponentsPlugin
public init(
featureData: FeatureMetricsData,
selection: Binding<Date?>,
label: String,
helperText: String?,
context: Binding<SemanticContext>,
dateFormatter: DateFormatter? = nil,
localizer: LocalizationAdapting,
locale: Locale? = nil
)Parameters
| Name | Description | Default values |
|---|---|---|
| featureData | the feature name/context and the screen ID in which the component appears. | |
| selection | optional date/time selected by the user. This parameters provides a means of passing back the user selection back to the features that are using this component. When the component loads, we display this as the current selection and fallback on the current time if this field does not have a value. | |
| label | Label to be positioned above field, already localized. | |
| helperText | Helper text below field, already localized. | |
| context | SemanticContext of the field. | |
| dateFormatter | DateFormatter of the field. | nil |
| localizer | Localizer for the field. | |
| locale | Optional server locale, if not provided we default to the device locale. | nil |
Accessibility Guidelines
- Coming soon…
Note
Our Time Picker makes use of the Material modal Time Picker to take advantage of the most familiar and expected date selection experience for our users. All behaviors and interactions follow Material’s guidelines. Our Time Picker has been themed to feel more at home within the Workday UI.
Usage Guidance
- The Time Picker is made up of both an input and a picker. – The Time Picker allows the selection of a single time, while the input invokes the picker and then displays the user’s selection. – The Time Picker defaults to the standard selection based entry method but also provides the option of a keyboard based entry.
When to Use
- When a normal time value (hour, minute, AM/PM) is needed.
When to Consider Something Else
- If a determinate time frame is needed (ie. 30 minutes, 2 hours or 6 days) use another selection based input, either a prompt, checkbox, or radio.
- If an indeterminate time frame is needed use a text or number input.
Refer to Material’s guidelines on the modal date picker for more information.
API Guidelines
Methods
fun TimePickerUiComponent(
modifier: Modifier = Modifier,
value: Long? = null,
dateConfig: DateConfig,
label: String,
helperText: String? = null,
semanticState: SemanticState = SemanticState(),
onValueChange: (Int, Int) -> Unit = { _, _ -> },
onValueRemoved: () -> Unit = {},
)Parameters
| Name | Description |
|---|---|
| modifier | Modifier for the component |
| value | Current time value for the Input represented as epoch UTC milliseconds. When null no time pill will be displayed in the input container |
| dateConfig | Configuration for the user’s date and time settings |
| label | String to display in the label above the time picker input field |
| helperText | String to be displayed below the time picker input field |
| semanticState | Semantic state of the date config, i.e. Warning, Error, Enabled, and Required states |
| onValueChange | Callback for time changes where the time changed is represented in epoch UTC milliseconds |
| onValueRemoved | Callback for when the time value is dismissed from the input field. Can’t happen when the semantic state is required |
Accessibility Guidelines
- Coming soon…
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.