Intro
A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both.
Time picker
Anatomy
A. Table Cell
The table cell displays a label and a selected value. The selected value is in tint color when the picker is active.
B. Scrollable List
The scrollable list contains values in a logical order. It can be accessed by tapping on the table cell.
Picker anatomy
Variations
Date Picker
Date pickers are used to select a specific time, date or the combination of both.
Date
Displays months, days in the month, and years.
Time
Displays hours, minutes, and an AM/PM designation.
Date and Time
Displays dates, hours, minutes, and an AM/PM designation.
For more information about displaying time and dates, see Time and Date Formats.
Date picker
Date Range Picker
Date range pickers are used to select a range between two selected dates. Depending on the application configuration, the selected range value can include or exclude disabled dates.
Date range picker
Value Picker
Value pickers are used for selecting any values of text or numbers. For numbers, always include appropriate granularity of the values.
Value picker
Duration Picker
Duration pickers are used to select a length of time including hours and minutes. The maximum of the duration picker is 23 hours and 59 minutes.
Duration picker
Adaptive Design
Pickers are supported in both compact and regular widths.
In regular width, the scrollable list can be shown below the table cell in a form sheet modal.
Date picker in compact and regular size
Resources
Development: UIKit FUIDatePickerFormCell, UIKit FUIDurationPickerFormCell, UIKit FUIValuePickerFormCell, SwiftUI DateTimePicker, SwiftUI DurationPickerComponent, SwiftUI ValuePicker
SAP Fiori for Android: Date Picker, Time Picker