Date Picker Component

Overview

Date Picker opens a compact calendar from its trigger with a controlled entrance, and the trigger label rolls to the new date once a day is chosen. Month changes can slide in the direction of travel or fade, while a shared highlight glides between dates so users can follow where they are. Month and year selectors let users jump directly instead of clicking repeatedly.

Theme and Interaction Customisation

Configure the trigger icon, date format, filled or outlined hover highlight, neighbouring-month days, a fixed six-week grid, and the first day of the week. Motion settings include the rolling label, scale or fade popup entrances, slide, fade, or instant month changes, animated arrows, and glide duration and bounce for the highlight.

Example Production Use Case

A SaaS onboarding form can use Date Picker to collect a preferred start date. Past dates are disabled, and the trigger rolls to the chosen day so customers can confirm it at a glance.

A reporting dashboard can let analysts jump straight to a month and year, then pick the day whose activity they want to review, without typing an ambiguous date string.

An ecommerce checkout can offer it for preferred delivery dates, while the store’s availability rules decide which days are actually bookable.

Best Used For

• Appointment and consultation forms.
• SaaS onboarding and account scheduling.
• Reporting dashboards that review a specific day.
• Event registrations.
• Project due dates and milestones.
• Ecommerce delivery or collection dates.
• Administrative date inputs for records and deadlines.

Not For

Date Picker selects a single day, so date ranges or several unrelated dates need a range or multi-date calendar.

If users only need a year or a few preset periods, a simple select field is faster than a full calendar.

It isn’t a scheduling engine. Picking a day doesn’t confirm availability, so bookings with precise times need time controls and timezone-aware logic.

Performance Budget

Keep opening, month navigation, and selection instant. Use lightweight transitions, use fixed six-week mode to avoid height shifts, and cancel in-progress animations during rapid navigation. Don’t animate anything while the calendar is closed.

Accessibility and Mobile

Label the trigger and navigation controls, announce full dates and states, support keyboard movement between days, and return focus when the popup closes. Today, selection, focus, and hover must differ by more than colour. On mobile, use comfortable date cells and keep the popover inside the viewport, and with reduced motion replace slides, gliding, and rolling text with instant changes.

Common Mistakes

• Letting month navigation overwrite the user’s chosen date.
• Displaying or storing dates in ambiguous formats.
• Mishandling short months and leap years.
• Styling today and the selected date the same way.
• Letting an older month’s transition play after a newer one.
• Expecting start scale, slide distance, or hover bounce to affect unsupported modes.
• Treating a selected date as confirmed availability.
• Forgetting focus management when opening and closing the calendar.
• Ignoring reduced-motion preferences.