Intro

The date/time input control allows users to select a date, time, or both, from a corresponding pad. However, SAP Fiori uses this control for time input only. Do not use this control for entering a date or a combination of date and time (see the Usage section below).

Usage

Use the date/time input if:

  • You want a control to enter the time.

Do not use the date/time input if:

  • You want a control to enter a date. In this case, use the date picker as it supports keyboard entry.

Responsiveness and Adaptiveness

The date/time input runs on all form factors and therefore works on all devices.

Date/time input opens in a popup for size S (for a smartphone, for example)
Date/time input opens in a popup for size S (for a smartphone, for example)
Date/time input in a popover for sizes M and L (for a tablet or desktop, for example)
Date/time input in a popover for sizes M and L (for a tablet or desktop, for example)

Behavior and Interaction

Selecting a Time

By clicking or tapping the date/time input field, the date/time input appears. The user can select a time by rotating the wheel.

When the user clicks the OK button, the popup/popover closes and the selected date and/or time appears in the input field. When the user clicks Cancel, the action is aborted and the input field remains unchanged.

Date time/input – Closed
Date time/input – Closed
Date/time input – Open
Date/time input – Open

Scrolling

Within the date/time input popup/popover, each area can be scrolled individually by dragging and dropping the areas.

Date/time input – Scrolling by swiping
Date/time input – Scrolling by swiping

When moving to the respective area in a desktop scenario, the user can also scroll by clicking the arrows that appear on hover. In a touch scenario, this functionality is disabled.

Date/time input – Scrolling by arrows
Date/time input – Scrolling by arrows

Guidelines

Set the default values of the date/time input carefully to avoid unnecessary scrolling. It often makes sense to set the default for the time to the full or half hour, setting the minutes to 00 or 30. Sometimes it may also make sense to use the current time.

Properties

The control may only be used to display and select a time or a duration (property: type).

Exceptions

If you need a control to enter a date/time combination and two separate fields are not enough, you can use the date/time input to support this combined input.

Keyboard Entry

Keyboard entry is not supported by the date/time input control.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation