build69
Sign inGet API key
build69  /  Components  /  Date & Time  /  DateRangePicker

DateRangePicker

v1.0.7Updated 27 Aug 2026

Two-month range picker in a Popover, with an optional quick-range rail (Today, Yesterday, Last 7/30 days, This month, Last month, This quarter) via `presets` — pass `true` for the built-ins or supply your own presets array. The trigger collapses the range to a compact label, dropping the repeated year when both ends share one. Supports Buddhist Era (พ.ศ.) and Thai locale labels.

View source← Back to catalog

Preview

Live · 9 stories
Date RangeOpen ↗
▸Why this is recommendeddaterangedaterangepickerpicker+6

DateRangePicker — date range.

Recommended for+14
  • ✓Picking a reporting period or date range
  • ✓Filtering a dashboard by last 7 / 30 days
  • ✓Selecting a billing period
  • ✓Choosing check-in and check-out dates
  • ✓Analytics date-range filter with quick presets
  • ✓Thai-localised reporting window in Buddhist Era (พ.ศ.)
  • ✓Exporting records between two dates
Tags+6
daterangedaterangepickerpickerpresetsreportingbuddhistthaicalendarpopover
Features+4
  • Start/end range selection across configurable numberOfMonths (default 2)
  • Built-in quick-range presets rail (presets={true})
  • Custom presets array with click-time range factories
  • Smart range label that omits the duplicated year
  • fromDate / toDate constraints
  • Controlled (range) or uncontrolled (defaultRange)
  • Thai Buddhist Era calendar + Thai locale labels
  • Does NOT pull in Select
  • i18n: calendar month/weekday names and year digits follow the app LocaleProvider (useB69Locale) for non-Thai locales
Not recommended for−2
  • ✕Picking one single date (use DatePicker)
  • ✕Picking a date plus a time (use DateTimePicker)
  • ✕Inline month view (use Calendar directly)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "DateRangePicker" })

Usage

import { DateRangePicker } from '@/components/inputs/date-range-picker';

<DateRangePicker range={range} onRangeChange={setRange} presets />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
range

Selected range (controlled), from react-day-picker

DateRange—
onRangeChange

Range selection callback

(range: DateRange | undefined) => void—
defaultRange

Initial value for uncontrolled usage (ignored when `range` is provided)

DateRange—
presets

Quick-range rail; `true` uses the built-in set (Today … This quarter). Picking one commits the range and closes the popover

DateRangePreset[] | boolean—
numberOfMonths

Months shown side by side (default 2)

number—
placeholder

Trigger text when no range is selected (default "Pick a date range")

string—
fromDate

Min selectable date

Date—
toDate

Max selectable date

Date—
formatStr

date-fns format string (default "MMM d, yyyy")

string—
align

Popover alignment

'start' | 'center' | 'end'—
children

Footer content rendered under the calendar

React.ReactNode—
calendar

Calendar system; "buddhist" renders พ.ศ. years

'gregorian' | 'buddhist'—
locale

Locale for labels and formatting. `locale="th"` now also supplies the Thai BUILT-IN strings (placeholder, era chip พ.ศ./ค.ศ., and for DateRangePicker the whole quick-range rail) — previously the grid localised but the trigger stayed English, which only showed on an EMPTY field. An explicit `labels` (or `placeholder`) still wins, and locale="en" is unchanged. MCP feedback fb_3adc3df4.

'en' | 'th'—
disabled

Disables the trigger

boolean—

Related

Platform docsAll componentsSource files