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

DatePicker

v1.0.9Updated 27 Aug 2026

Date, date-range, and date-time pickers built on Calendar + Popover. Supports from/to constraints, a presets footer slot, and the Thai Buddhist Era calendar (พ.ศ.) with full Thai locale labels.

View source← Back to catalog

Preview

Live · 11 stories
Single DateOpen ↗
▸Why this is recommendeddatepickerdatepickercalendar+5

DatePicker — single date.

Recommended for+14
  • ✓Picking a single date in a form
  • ✓Birth date or invoice date entry
  • ✓Thai invoice date entry in Buddhist Era (พ.ศ.)
  • ✓Filtering a table by one date
  • ✓Booking a single-day appointment
  • ✓Choosing a deadline or due date
Tags+6
datepickerdatepickercalendarsinglebuddhistthailocalepopover
Features+4
  • Single date selection in a Popover
  • fromDate / toDate constraints (day-granularity, time-of-day safe)
  • Controlled (date) or uncontrolled (defaultDate)
  • Composable footer slot via children
  • Thai Buddhist Era calendar (calendar="buddhist") rendering พ.ศ. years
  • BE/CE era toggle chip
  • Thai locale (locale="th") for month / weekday labels
  • Does NOT pull in Select — lighter than DateTimePicker
  • i18n: calendar month/weekday names and year digits follow the app LocaleProvider (useB69Locale) for non-Thai locales
Not recommended for−2
  • ✕Selecting a start and end date (use DateRangePicker)
  • ✕Selecting a date together with a time (use DateTimePicker)
  • ✕Always-visible inline month view (use Calendar directly)
  • ✕Scheduling grid (use BuildCalendar)

Install

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

get_registry_item({ name: "DatePicker" })

Usage

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

<DatePicker date={date} onDateChange={setDate} fromDate={new Date()} />

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
date

Selected date (controlled)

Date—
onDateChange

Selection callback

(date: Date | undefined) => void—
value

Alias of `date`, matching the value/onValueChange convention of the other inputs; `date` wins when both are set

Date—
onValueChange

Alias of `onDateChange`; fired alongside it

(date: Date | undefined) => void—
defaultDate

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

Date—
placeholder

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

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