Date and Time Pickers - Overview

Foundations / Best Practices / UI Elements / Date and Time Pickers – Overview
This guideline now covers both SAPUI5 and SAP Web Components. Learn more.
Information
Icon
false

Intro

Date and time pickers enable users to select, enter, and review dates and times. They support both structured input and interactive selection.

In the SAP Design System for Web, date and time selection is supported by a set of UI components:

Each component supports a different level of detail and interaction. Use this overview to select the right component for the use case.

Variants

Calendar

A UI component for browsing and selecting dates.

  • Use when: Users need to explore dates, select a single date, multiple dates, a full week, or a date range.
  • Behavior: Displays days, months, or years in a grid. Supports navigation and selection.
  • Example: Calendar showing November 4, 2025 as the current date.

Calendar

For complete guidance, see the Calendar.

Time Picker

An input field combined with a clock popover for selecting time.

  • Use when: Users need to select a time or a time range.
  • Behavior: Supports typing a value in the input or selecting a time from the popover. Displays hours, minutes, and seconds.
  • Example: Time picker with the popover open, showing 4:30 PM.

Time picker

For complete guidance, see the Time Picker.

Date Picker

An input field combined with a calendar popover for selecting a single date.

  • Use when: Users need to enter or select one specific date.
  • Behavior: Supports typing a date or selecting it from the calendar popover, which is collapsed by default.
  • Example: Date picker showing November 4, 2025 as the current date.

Date picker

For complete guidance, see the Date Picker.

Date Range Selection

An input field combined with a calendar popover for selecting a date range.

  • Use when: Users need to select a date range.
  • Behavior: Supports entering or selecting a start and end date from the calendar popover; validates the range and closes the popover.
  • Example: Date range selection showing November 17 to 21, 2025.

Date range selection

For complete guidance, see the Date Range Selection.

Date/Time Picker

A UI component used to select both date and time.

Date/time picker

For complete guidance, see the Date/Time Picker.

Component Usage Guidance

<div> <div>Component</div> <div>Use when...</div> <div>Behavior</div> <div>Example</div> </div> <div> <div><strong>Calendar</strong></div> <div>Exploring and selecting dates visually.</div> <div>Displays navigation and selection of days, months, and years.</div> <div>Selecting entire week.</div> </div> <div> <div><strong>Time Picker</strong></div> <div>Selecting or entering a specific time.</div> <div>Supports typing in the input or selecting time from a clock popover.</div> <div>Setting a meeting time.</div> </div> <div> <div><strong>Date Picker</strong></div> <div>Choosing a single date.</div> <div>Supports typing a date in the input or selecting a date.</div> <div>Entering a birth date.</div> </div> <div> <div><strong>Date Range Selection</strong></div> <div>Selecting a date range.</div> <div>Supports selecting start and end date from the calendar or typing in the input.</div> <div>Filtering data within a date range.</div> </div> <div> <div><strong>Date/Time Picker</strong></div> <div>Selecting both date and time in one interaction.</div> <div>Supports date and time selection in a combined component.</div> <div>Scheduling an appointment.</div> </div>

For detailed design guidelines, see the individual pages for each component variant.

Guidelines

Components
Calendar
Date Picker
Date/Time Picker
Date Range Selection
Time Picker

Implementation

SAPUI5
Calendar (samples)
Calendar (API reference)
Date Picker (samples)
Date Picker (API reference)
Date/Time Picker (samples)
Date/Time Picker (API reference)
Date Range Selection (samples)
Date Range Selection (API reference)
Time Picker (samples)
Time Picker (API reference)