UIREADY.dev
30% offEnding soon
FSD-004Frontend system design Premium

Design a Date Picker and Date-Range Picker

Design a locale-aware date picker and date-range picker with correct date values, constraints, keyboard access, and reliable form contracts.

Intermediate 39 min read

Design the picker around date-only domain values, not timestamps. Keep the committed range separate from the visible month and draft hover state. Format dates for the reader's locale, validate static constraints in the browser, and let the server decide changing business availability at commit time.

A calendar looks like a grid of buttons, but the hard problems sit underneath it. A birthday does not become a different day when a person travels. A hotel stay has a start and end rule. A booking date that looked free ten seconds ago may no longer be available.

The design needs clean boundaries between value, presentation, interaction, and business policy.

Start with the value type

Use a date-only value for date-only products. An ISO calendar date such as 2026-10-12 or Temporal.PlainDate can represent the user's intent without an accidental time zone conversion.

Keep these states separate:

  1. Committed value: the date or range the surrounding form owns.
  2. Draft selection: the first range endpoint and current preview before commit.
  3. View state: visible month, focused day, and open state.
  4. Constraint snapshot: the rules currently known by the browser.

The visible month can change without changing the value. Hovering a possible end date can change the preview without committing it. A fresh server response can change availability without moving keyboard focus.

The public interview prompt

Design a reusable date picker and date-range picker for a frontend component platform. Explain:

  • date-only identity, committed and draft range state, and form serialization;
  • month navigation, keyboard movement, pointer and touch input, and focus restoration;
  • minimum, maximum, disabled, blackout, lead-time, and changing availability rules;
  • locale formatting, first day of week, right-to-left layout, and alternate calendars;
  • loading, stale, conflict, offline, invalid, and partial range states;
  • browser and service contracts, security, observability, testing, rollout, and evolution.

Assume the service can return availability for a bounded date interval and validates the final submission. The first version does not include free-form natural-language date parsing, time-of-day selection, recurring schedules, or collaborative booking.

What the premium solution covers

The complete solution defines a typed date model, controlled component API, range state machine, locale-aware calendar projection, keyboard grid contract, constraint precedence, interval availability API, cache keys, stale-response guards, conflict recovery, accessible announcements, mobile layout, performance budgets, security rules, telemetry, deterministic tests, rollout gates, and an interview scoring rubric.

Original desktop and mobile media show the range lifecycle and the difference between stored date values and rendered calendar labels. A deterministic lab lets you reverse the endpoints and compare rejection with clamping without sending any protected content to a non-Premium browser.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

Should a date picker store a JavaScript Date?
Usually not for a date-only field. A birthday, check-in day, or reporting date has no time or time zone. Store an ISO calendar date such as 2026-10-12 or a Temporal.PlainDate, then convert to an instant only when the product actually needs one.
How should a date-range picker represent its value?
Use two explicit date-only values, start and end, plus a documented policy for incomplete and invalid ranges. Do not infer the range from highlighted cells because the visible calendar is only a projection of the committed value and current draft.
Who validates unavailable dates?
The browser can give immediate feedback, but the server remains authoritative for changing business rules such as inventory, booking windows, permissions, and blackout dates. Submit stable date strings and return field-level conflicts that preserve the user's draft.
How does a date picker support international users?
Keep the stored value independent from presentation. Format labels with locale-aware APIs, use locale week data for first day of week and weekend display, support right-to-left layout, and never parse a localized display string as the canonical value.
What keyboard behavior should a calendar grid support?
Keep one focusable grid cell, move among dates with arrow keys, provide documented larger jumps, and let Enter or Space select. Escape closes the dialog and focus returns to the trigger. Test the exact model with supported browser and screen-reader combinations.
Should a date picker disable invalid dates or explain them after selection?
Use both where appropriate. Disable dates that are certainly unavailable and expose the reason in accessible text. Revalidate on commit because availability may change after the calendar was rendered.