Components/Time Picker
fd-time-picker · 5 examples from SAP's documentation · Back to the gallery
About
The time picker allows the user to select a localized time, based on the 12-hour syste or the 24-hour system. It can be used with touch, mouse, or keyboard input. For more information visit Fiori Design Guidelines
**Use the time picker if:** - Users need to select a time. - Users need to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time. - Users need to select a specific duration, such as 1 minute and 30 seconds. **Do not use the time picker if:** - Users need to select a standard duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the select control instead. **Use the time picker if:** - Users need to select a time. - Users need to select a time range. In this case, one time picker can be used to set the starting time and a second one to set the end time. - Users need to select a specific duration, such as 1 minute and 30 seconds. - Users need to select a standard duration such as 15 minutes, 30 minutes, 1 hour, or 2 hours. In this case, use the select control instead.
Time Picker with 24-hour Clock Face
The 24-hour clock face shows an additional inner circle for the times from 13:00 to 24:00 hours.
Time Picker with 12-hour Clock Face
The 12-hour clock face shows only one circle and an AM/PM switch is displayed.
Minutes Face
When the minutes value is selected in the time display, the minutes clock face is shown.
Seconds Face
When the seconds value is selected in the time display, the seconds clock face is shown.
Mobile
On phones, focusing on the time input field opens a time input popover. The user can then use the mobile keyboard to enter the time. For the 12-hour time format, the popover also offers an AM/PM switch.