Date Picker
Date Pickers allow users to select a date.
Note
Our date picker makes use of the native iOS compact style date picker to take advantage of the most familiar and expected date selection experience for our users. All behaviors and interactions follow the default native iOS guidelines.
Usage Guidance
- The date picker is used in conjunction with the date input. The picker allows the selection of a single date, while the input invokes the picker and then displays the user’s selection.
When to Use
- When selecting a date within a year, past or future. Selecting dates beyond that range may be hard to navigate for some users. When pickers open they default to the current date.
When to Consider Something Else
- Use the keyboard style date input when entering dates that are familiar to the user, like birthdays; or dates that are far out, beyond a year.
Refer to the iOS guidelines on the compact date picker for more information.
API Guidelines
- Coming soon…
Accessibility Guidelines
- Coming soon…
Note
Our date picker makes use of the Material modal date picker to take advantage of the most familiar and expected date selection experience for our users. All behaviors and interactions follow the Material’s guidelines. Our date picker has been themed to feel more at home within the Workday UI.
Usage Guidance
- The date picker is to be used in conjunction with our date input. The picker allows the selection of a single date, while the input invokes the picker and then displays the user’s final selection.
When to Use
- When selecting a date within a year or so. When selecting dates beyond that range, pickers may be hard to navigate for some users.
When to Consider Something Else
- Use the keyboard style date input when entering well-known dates, like birthdays, or dates that are far out, beyond a year or so.
Refer to Material’s guidelines on the modal date picker for more information.
API Guidelines
Methods
fun DatePickerUiComponent(
modifier: Modifier = Modifier,
value: Long? = null,
minimumDate: Long? = null,
maximumDate: Long? = null,
onValueChange: (Long?) -> Unit,
onDismiss: () -> Unit = {},
label: String? = null,
onRemove: () -> Unit = {},
helperText: String? = null,
dateConfig: DateConfig = DateConfig(),
semanticState: SemanticState = SemanticState()
)Parameters
| Name | Description | Default values |
|---|---|---|
| value | Current date value for the Input represented as epoch UTC milliseconds. | null |
| minimumDate | Minimum date for the date picker. All dates earlier than this date will be disabled. If initialized with a [value] earlier than the [minimumDate], an exception will be thrown. | null |
| maximumDate | Maximum date for the date picker. All dates after this date will be disabled. If initialize with a [value] later than the [maximumDate], an exception will be thrown. | null |
| onValueChange | Callback for date changes where the date changed is represented in epoch UTC milliseconds. | |
| onDismiss | Callback for dismissing the DatePicker. | |
| label | String to display in the label above the date input. | null |
| onRemove | Callback to remove removable pill component by changing value to null. | |
| helperText | String to be displayed below the date input. | null |
| dateConfig | Date string formatting and time zone configuration, defaulted to device Locale and UTC time. | DateConfig() |
| semanticState | Semantic state of the date config, i.e. Warning, Error, Enabled, and Required states. | SemanticState() |
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.