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
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
Variations
Date Picker
Use a date picker 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
Value Picker
A value picker can be used for selecting any values of text or numbers. For numbers, always include appropriate granularity of the values.
Value picker
Duration Picker
Use a duration picker to select a length of time including hours and minutes. The maximum of the duration picker is 23 hours and 59 minutes.
Duration picker
Resources
Development: UIKit FUIDatePickerFormCell, UIKit FUIDurationPickerFormCell, UIKit FUIValuePickerFormCell, SwiftUI DateTimePicker, SwiftUI DurationPickerComponent, SwiftUI ValuePicker
SAP Fiori for Android: