Intro

The time picker lets users select a localized time using touch, mouse, or keyboard input in 12-hour or 24-hour format. Users can either type a time directly or use the visual clock face to choose hours, minutes and seconds.

Time picker

When to Use

2
do
false

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.
dont
false

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 component instead.

Anatomy

Time Picker

  1. Time picker input field: The field where users enter the time. It includes an input mask that guides entry and enforces the correct format.
  2. Time picker button: The icon that opens the clock face popover, allowing users to select the time visually instead of typing.

Anatomy of a time picker

Time Picker Popover

  1. Time picker popover: The clock face interface for selecting hours, minutes and seconds.
  2. Hours field: Displays the hour entered or selected.
  3. Minutes field: Displays the minutes entered or selected.
  4. Seconds field (optional): Displays the seconds entered or selected. You can add the seconds field if it’s relevant for your use case. The recommended display format doesn’t include seconds.
  5. AM/PM switch: Displayed when using the 12-hour format. It lets users toggle between morning and afternoon.
  6. Clock face for selecting the time: Visual interface of a circle for selecting hours, minutes, or seconds. The appearance adjusts based on the selected unit and time format (12-hour or 24-hour).
  7. Footer: Contains the OK and Cancel buttons for confirming or dismissing the selection.

Anatomy of the time picker’s clock popover

Clock Face

  1. Clock face circle: The visual ring used to display and select time values.
  2. Tick marks: Radial markers that indicate time intervals on the clock face.
  3. Hour selector: Numeric values shown sequentially around the clock face that users can click or tap to set the hour.
  4. Selected hours/minutes/seconds: The currently selected time value, visually highlighted on the clock face.
  5. Hours/minutes/seconds label: Contextual label in the center of the clock face showing which time unit is currently being selected.

Anatomy of the time picker’s clock face

Types

The time picker offers two clock face variations for selecting hours (12-hour format with AM/PM and 24-hour format) and a 60-minute segmented clock face for selecting minutes and seconds sequentially.

Time Picker types

A. 12-hour clock face: Displays hours from 1 to 12 with AM and PM options for selecting time in a 12-hour format.

B. 24-hour clock face: Displays hours from 0 to 22, enabling time selection in a 24-hour format.

C. Selection of hours, minutes and seconds: Allows users to pick hours, minutes and seconds sequentially on a 60-minute clock face.

States

Time picker interaction and value states

Interaction States

A. Regular: Default state of the input field, without any user interaction.

B. Hover: Highlights the field when the cursor is placed over it.

C. Active: Indicates the field is currently focused and ready for input.

D. Read only: Displays the time but prevents user edits.

E. Disabled: Shows the field as unavailable for interaction.

Value States

F. Information: Represents neutral messaging without implying success, warning or error.

G. Success: Confirms a valid or expected value.

H. Warning: Alerts users to a potential issue or unexpected input.

I. Error: Indicates an invalid value or failure to meet input criteria.

Behavior and Interaction

Users can enter the time in two ways:

Entering a Time in the Input Field

On desktop devices, the user selects the time input field and enters the time using the keyboard.

Entering a time using a keyboard

A. Placeholder: Shows placeholder text when no value has been entered.

B. Input active: Displays an active input field ready to take user input.

C. Time entered: Shows the selected or typed time after entry is complete.

On phones, focusing on the time input field opens a time input popover full screen. 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.

Time Selection with the Time Picker Popover

By default, the time picker displays the hours clock face, highlighting the hour value in the time display at the top of the popover. On desktop devices, users can select the time using a mouse or keyboard arrows. On tablets and mobile devices, users can drag the handle around the dial or tap the number on the dial to select the desired time. The selected hour is then reflected in the time display.

Once an hour is selected, the chooser automatically transitions to the minutes view, highlighting the minutes value in the time display. If an hour was mistakenly chosen, users can return to the hours clock face by selecting the hours value again.

Minutes and seconds are selected similarly. Clicking the OK button confirms the selected time, whereas clicking Cancel or anywhere outside the popover discards the changes.

Time selection on a desktop device

A. Hours: Clock face showing the hour value has been set.

B. Minutes: Clock face showing the minutes value has been set.

C. Seconds: Clock face showing the seconds value has been set.

Default Time

You can set a predefined time, which shows as the initial value in the time input field and the time picker popover. If you don’t set a default time at application level, the control defaults to the current time. Users can overwrite the initial value.

Preventing Errors

You can prevent users from making incorrect entries by only allowing certain characters (see mask input). If the user enters a time that has the correct format but is invalid (such as 12:60:85), the time picker displays a validation error (see input validation).

You can switch off the integrated mask input feature, but we strongly recommend using it. Only deactivate mask input if you need to make an exception for your use case (for example, if a variable length is required for a specific locale).

Now Button

You can offer a shortcut for setting the current time by displaying the Now icon button (:icon-present ) in the navigation part of the clock (sap.m.TimePicker, property: showCurrentTimeButton). Pressing the button changes the values to reflect the current time.

This property applies only to pickers that enable the selection of individual times. It has no effect on other pickers.

Responsiveness

The time picker comes with a cozy mode and a compact mode. For more information, see Content Density.

Time input popover on mobile or tablet devices

On mobile (size S) devices, the time picker popover opens in a full-screen view instead of appearing directly below the time input field.

Time input popover on mobile or tablet devices

Guidelines

Seconds

Only enable selection of seconds if they are necessary in the user’s context.

Time Zone

If the user has to set a time that is time zone-sensitive, offer a select control next to the time picker control to choose the appropriate time zone. For more information, see Formatting Time.

Localization

The time picker supports both left-to-right (LTR) and right-to-left (RTL) languages. In RTL mode, the input field is mirrored, and elements such as the value help icon are aligned to the left instead of the right. All functionality remains the same.

Time picker in a left-to-right mode

Time picker in a right-to-left mode

Elements and Controls

Implementation

Visual Design

Elements and Controls

Implementation