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

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

Behavior and Interaction

Selecting a Time

Scrolling

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

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.

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.