Date Picker

Select dates from a calendar interface

What it solves

A Date Picker is a form component that combines a text input (showing the selected date) with a calendar overlay that allows users to visually browse and select a date. The calendar provides context about surrounding dates, days of the week, and time-relative positioning that a plain text input cannot offer. Unlike a Date Input (which is optimized for direct keyboard entry of known dates), a Date Picker is designed for situations where the user benefits from seeing the calendar — scheduling appointments, choosing a future delivery date, or selecting from a constrained set of available days.

When to use

• Appointment scheduling – Users need to see available slots in context.
• Delivery and shipping dates – Shows available delivery days vs. blackout dates.
• Event creation – Users select a date relative to today or other events.
• Hotel and travel booking – Contextual date selection with pricing or availability.
• Report or filter date – Selecting a specific date for data filtering.

When to avoid