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

DateTimePicker

v1.0.7Updated 27 Aug 2026

Combined date + time-of-day picker: a Popover calendar with an Hour/Minute Select row beneath it, merging both into one Date value. Minute options are step-filtered via `minuteStep` (default 5), and an off-grid current minute (e.g. :37 on a 5-minute step) is spliced in so the control never misrepresents the stored time. Supports Buddhist Era (พ.ศ.) and Thai locale labels.

View source← Back to catalog

Preview

Live · 7 stories
Date TimeOpen ↗
▸Why this is recommendeddatetimedatetimedatetimepicker+6

DateTimePicker — date time.

Recommended for+14
  • ✓Scheduling a meeting start time
  • ✓Setting an appointment date and time
  • ✓Choosing a send/publish timestamp
  • ✓Booking a slot with a specific time
  • ✓Setting a reminder date and time
  • ✓Recording an event date and time in a form
Tags+6
datetimedatetimedatetimepickerpickerhourminuteschedulingbuddhistthai
Features+4
  • Date and time-of-day in a single Popover
  • Hour + minute Select dropdowns
  • minuteStep filtering (default 5) with off-grid minute preserved
  • Seconds and milliseconds zeroed on time change
  • Controlled (date) or uncontrolled (defaultDate)
  • Thai Buddhist Era calendar + Thai locale labels
  • BE/CE era toggle chip
  • i18n: calendar month/weekday names and year digits follow the app LocaleProvider (useB69Locale) for non-Thai locales
Not recommended for−2
  • ✕Date-only selection (use DatePicker — it avoids loading Select)
  • ✕Selecting a date range (use DateRangePicker)
  • ✕Time-only entry with no date (use TimePicker)
  • ✕Fast keyboard-only entry of precise times (use a text time field)

Install

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

get_registry_item({ name: "DateTimePicker" })

Usage

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

<DateTimePicker date={date} onDateChange={setDate} minuteStep={15} />

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 + time (controlled)

Date—
onDateChange

Selection callback

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

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

Date—
minuteStep

Minute granularity in the dropdown (default 5)

number—
placeholder

Trigger text when nothing is selected (default "Pick a date & time")

string—
formatStr

date-fns format string (default "MMM d, yyyy 'at' HH:mm")

string—
align

Popover alignment

'start' | 'center' | 'end'—
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