What is Date range picker?

A date range picker collects two dates that belong together: the start and end of a report, a stay, a billing period, a filter on a table. It usually combines two fields with a calendar popup where the user clicks the first day and then the last, and the days between them highlight. Analytics dashboards, booking sites and export dialogs all rely on it. The hard parts are not the calendar; they are validation, time zones and letting people type.

Anatomy

• Two fields, start and end, each labeled and each accepting typed input in a clear format.
• A calendar grid, often two months side by side on desktop and one on mobile, with the selected range shaded.
• Presets such as Today, Last 7 days, Last 30 days and This month. Most users pick a preset; the calendar is for everything else.
• Apply and Cancel when the choice drives an expensive query, so the table does not reload after every click.

Rules worth deciding early

• The end date cannot be before the start date. Either swap them silently or disable earlier days once a start is chosen, and say which you do.
• Decide whether the end is inclusive. "Jan 1 to Jan 31" usually means the whole of the 31st.
• Store calendar ranges as plain ISO strings like 2026-03-01, and attach a time zone only when the data has one. Converting a date-only value through the browser's local time is the classic source of off-by-one-day bugs.
• Put the range in the URL for dashboard filters so a view can be shared and the back button works.

Accessibility

The native <input type="date"> is well supported in most browsers and gives keyboard entry, a built-in picker on phones and correct semantics for free; MiniDev's picker builds on it. If you render a custom calendar, follow the WAI-ARIA date picker dialog example: the days form a grid with one Tab stop, Arrow keys move by day and week, Page Up and Page Down move by month, Home and End jump to the ends of the week, and the focused day announces its full date. Always keep the typed fields; a calendar-only control blocks screen reader users and anyone who already knows the date they want.

How to build one in React

MiniDev's DateRangePicker pairs two DatePicker inputs labeled Start date and End date and reports both values as ISO strings:

"use client"
import * as React from "react"
import { DateRangePicker } from "@/components/ui/date-range-picker"

export function ReportRange() {
  const [range, setRange] = React.useState<{ from?: string; to?: string }>({})
  const valid = !range.from || !range.to || range.from <= range.to
  return (
    <div className="space-y-2">
      <DateRangePicker value={range} onChange={setRange} />
      {!valid ? <p role="alert" className="text-sm text-danger">The end date must be after the start date.</p> : null}
    </div>
  )
}

ISO date strings compare correctly as plain strings, which is why the check above needs no Date objects. For a full month view with events, see CalendarMonth and EventCalendar in the forms category.