bellhop by actabl

When to use

Use date pickers when users need to select specific dates for scheduling, filtering, or data entry.

Booking and Reservations

Select check-in/check-out dates, appointment times, or reservation periods.

Date Filtering

Filter reports, data tables, or search results by specific dates or date ranges.

Form Fields

Collect birth dates, deadlines, or any date-specific information in forms.

Scheduling

Set due dates, schedule events, or plan future activities.

When not to use

  • For date ranges—use date-range-picker instead
  • For relative dates (today, yesterday)—use predefined options
  • When users commonly enter dates manually—provide text input option
  • For very distant past/future dates—consider text input with validation

Anatomy

Date pickers consist of a trigger input and a calendar popup interface.

  1. Trigger Input

    Input field or button that opens the calendar popup

  2. Calendar Header

    Month/year display with navigation arrows

  3. Calendar Grid

    Grid of days showing the current month

  4. Selected Date

    Highlighted day indicating the current selection

  5. Footer Actions (Optional)

    Today button and confirm/cancel actions

Types

Date pickers support various trigger styles and selection modes.

Dropdown Outlined

Date picker triggered by an outlined button with dropdown styling.

Dropdown Ghost

Minimal ghost button style for subtle date picker triggers.

Input Field

Traditional text input with calendar icon that opens date picker.

With Footer

Calendar with footer actions including Today shortcut and confirm buttons.

Immediate Selection

Date applies immediately when clicked without requiring confirmation.

Disabled

Non-interactive state for when date selection is not available.

Interaction

Date pickers support mouse and keyboard navigation through the calendar.

Calendar Navigation

Navigate between months using arrow buttons in the calendar header.

Date Selection

Click a date to select it, with visual feedback showing the selection.

Keyboard Navigation

Use arrow keys to navigate dates and Enter to select.

Quick Actions

Today button provides quick access to current date selection.

Placement

Date pickers can be placed in forms, filters, and anywhere date input is needed.

Form Fields

Use in forms for collecting date information like birth dates or deadlines.

Filter Panels

Place in filter panels to narrow down results by date ranges.

Toolbars

Include in toolbars for date-based views like calendars or schedules.

Booking Interfaces

Essential for reservation systems, booking forms, and scheduling tools.

Accessibility

Date pickers follow WAI-ARIA date picker pattern for keyboard accessibility.

Keyboard Support

  • Tab: Move focus through trigger, calendar, and action buttons
  • Arrow Keys: Navigate between days in the calendar grid
  • Enter/Space: Select the focused date
  • Escape: Close calendar without selecting
  • Page Up/Down: Navigate between months

ARIA Attributes

  • role="dialog": Identifies calendar popup as dialog
  • aria-label: Provides accessible names for navigation buttons
  • aria-selected: Indicates selected date
  • aria-current="date": Marks today's date

Screen Reader Support

  • Calendar structure is announced with month and year
  • Dates are announced as they receive focus
  • Selected date is clearly communicated
  • Navigation actions are announced

Focus Management

  • Focus moves to calendar when opened
  • Focus returns to trigger when closed
  • Clear focus indicators on all interactive elements
  • Keyboard navigation cycles within calendar

Resources

Design and development resources for the Date Picker component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →