NameThatUIPattern diagnostic

composite pattern · Selection and suggestions

Date Picker

A text input with an associated calendar popup that lets users pick or range-select a date with keyboard navigation.

Date Picker behavior diagram
reviewpublishedV1 field note

Decisive boundary

A date picker is a form control for dates. Distinguish it from a time picker, a general calendar view, and a date-pattern text input without a popup.

Definition and intent

What is a Date Picker UI pattern?

Use the behavior, not the silhouette

A text input with an associated calendar popup that lets users pick or range-select a date with keyboard navigation. The term is used here as a composite pattern made from multiple controls or regions that must work together. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Let users enter a date or date range quickly without formatting errors. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Date Picker, the boundary is: A date picker is a form control for dates. Distinguish it from a time picker, a general calendar view, and a date-pattern text input without a popup.

Do not implement it as Input text for structured dates that users can pick from a calendar, and Calendar as a persistent dashboard view. If those requirements describe the real task better, use the related pattern page or the full Selection and suggestions comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

01

Confirm the user job

Let users enter a date or date range quickly without formatting errors.

02

Define opening and closing

Focus on the input or click on the calendar icon. Selecting a date, Escape, or clicking outside the popup.

03

Specify access behavior

Focus returns to the input after date selection; within the popup, focus moves among calendar cells. Arrow keys navigate days; Enter selects; Escape closes; Tab exits the control.

04

Reject the near miss

Input text for structured dates that users can pick from a calendar, and Calendar as a persistent dashboard view.

Behavior contract

What must survive the build

trigger
Focus on the input or click on the calendar icon.
dismissal
Selecting a date, Escape, or clicking outside the popup.
modality
Non-modal control context.
focus
Focus returns to the input after date selection; within the popup, focus moves among calendar cells.
keyboard
Arrow keys navigate days; Enter selects; Escape closes; Tab exits the control.
interactive
Users select or input a date; optional range selection with start and end dates.
persistence
The selected date value persists in the input.
placement
Inline input with an anchored or viewport-positioned calendar popup.
mobile
Prefer native platform date picker where available; custom pickers must handle touch on small targets.

Failure modes

Common wrong builds

  • Replacing the native picker without accessibility parity.
  • Using all-text date input where a calendar popup would reduce errors.
  • Omitting keyboard navigation for calendar cells.
  • Hiding the popup before the user can click a date.

Observable checks

Verify the result

  • The input accepts formatted dates.
  • The calendar popup opens with focus or click.
  • Arrow keys navigate cells inside the popup.
  • Enter selects a date.
  • Escape closes without changing the value.
  • Mobile uses a native or touch-friendly alternative.

Coding-agent handoff

Implementation brief template

Pattern: Date Picker
Purpose: Let users enter a date or date range quickly without formatting errors.
Trigger: Focus on the input or click on the calendar icon.
Dismissal behavior: Selecting a date, Escape, or clicking outside the popup.
Modality: Non-modal control context.
Focus behavior: Focus returns to the input after date selection; within the popup, focus moves among calendar cells.
Keyboard behavior: Arrow keys navigate days; Enter selects; Escape closes; Tab exits the control.
Interactive content: Users select or input a date; optional range selection with start and end dates.
Placement: Inline input with an anchored or viewport-positioned calendar popup.
Mobile behavior: Prefer native platform date picker where available; custom pickers must handle touch on small targets.
Do not implement as: Input text for structured dates that users can pick from a calendar, and Calendar as a persistent dashboard view.
Acceptance checks:
- The input accepts formatted dates.
- The calendar popup opens with focus or click.
- Arrow keys navigate cells inside the popup.
- Enter selects a date.
- Escape closes without changing the value.
- Mobile uses a native or touch-friendly alternative.

Claim-level references

Sources, not a confidence score

01Date PickerCarbon Design System · Official design-system documentation

Date input, calendar popup, range selection, and keyboard interaction

Do not stop at the label

Input text for structured dates that users can pick from a calendar, and Calendar as a persistent dashboard view.

Diagnose this decision
Full clusterSelection and suggestions Common alternativeSelectCommon alternativeComboboxCommon alternativeAutocomplete

Related UI patterns

How Date Picker differs from nearby options

Follow the behavior boundary, not a shared visual treatment.

semantic pattern

Date Picker vs Select

A control for choosing one or more values from a predefined set without accepting arbitrary text input. The key question for Select is: If users need to type or filter a long list, use an editable Combobox.

semantic pattern

Date Picker vs Combobox

An input or selection control with an associated popup that presents allowed or suggested values. The key question for Combobox is: Autocomplete describes how suggestions respond to input; Combobox is the broader widget pattern.

behavior variant

Date Picker vs Autocomplete

A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox. The key question for Autocomplete is: Specify whether suggestions are advisory or whether the final value must come from the list.

Frequently asked questions

Date Picker UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Date Picker in web UI?

A text input with an associated calendar popup that lets users pick or range-select a date with keyboard navigation. In this reference set it is a composite pattern made from multiple controls or regions that must work together.

When should I use a Date Picker?

Let users enter a date or date range quickly without formatting errors. The decisive boundary to confirm is this: A date picker is a form control for dates. Distinguish it from a time picker, a general calendar view, and a date-pattern text input without a popup.

What keyboard and focus behavior does a Date Picker need?

Arrow keys navigate days; Enter selects; Escape closes; Tab exits the control. Focus returns to the input after date selection; within the popup, focus moves among calendar cells. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Date Picker behave on mobile?

Prefer native platform date picker where available; custom pickers must handle touch on small targets. Its modality is a separate requirement: Non-modal control context.

How do I verify a Date Picker implementation?

Start with observable checks: The input accepts formatted dates. The calendar popup opens with focus or click. Arrow keys navigate cells inside the popup. Then verify the remaining checks and compare the result with the linked source guidance.