Components / Date Time Picker

Date Time Picker

Picking a date and a time together, like scheduling a post: a calendar popover, a time input, and an optional clear button in one row.

import { DateTimePicker } from '@layers/ui/date-time-picker'

Rendered stock

House rules

  • Fully controlled: date (Date | null) and time ("HH:mm" string) with onDateChange/onTimeChange. The time input and clear button only appear once a date is picked.
  • direction="horizontal" (default) keeps a fixed-width time input beside the date button; "vertical" stacks both full width.
  • disableDate gates which days are selectable, e.g. past days when scheduling. Passing onClear renders the clear button; omit it when a date is required.

See also