Build a Date Picker Calendar with Range Selection

Question

Accepted Answer

**Requirements**
- Monthly grid (Sun–Sat header) with prev/next month navigation; today highlighted, disabled dates (min/max).
- Modes: single date or range (start → end, hover preview); emit `onChange(date)` or `[start,end]`.
- Keyboard: arrow keys move focus day-by-day, PageUp/Down month, Enter selects; `aria-selected`.

**Architecture**
- Derive `days = getDaysInMonth(year, month)` with leading blanks (`firstDayOfWeek`). Grid 7×6.
- Range: `hoverDate` state for preview; class `in-range` if `date > start && date < (hoverDate ?? end)`.
- Use native `Date` or `date-fns` for math; avoid timezone bugs by using noon UTC or `Temporal` if allowed.

**What interviewers look for:** calendar grid math, range preview, keyboard grid navigation, disabled logic, a11y, no external date lib pitfalls.

**Reference implementation**
```jsx
function getMonthGrid(y, m) {
  const first = new Date(y, m, 1).getDay();
  const days = new Date(y, m+1, 0).getDate();
  return [...Array(first).fill(null), ...Arra

Build a Date Picker Calendar with Range Selection

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.