Datetime picker

Pick a date and time together.

import { BuiDatetimePicker } from 'ng-blatui';

<bui-datetime-picker [(value)]="when" />

Custom placeholder

<bui-datetime-picker [(value)]="when" placeholder="Pick date & time…" />

Min / max

<!-- min/max forward to the inner calendar -->
<bui-datetime-picker [(value)]="when" minDate="2026-06-01" maxDate="2026-06-30" />

With seconds

<!-- [seconds]="true" forwards to the time field -->
<bui-datetime-picker [(value)]="when" [seconds]="true" />

Dropdown caption

<bui-datetime-picker [(value)]="when" captionLayout="dropdown" />

Range

<!-- mode="range" → start–end dates sharing one time; [months]="2" shows both grids -->
<bui-datetime-picker mode="range" [months]="2" [(range)]="range" />
// range = signal({ start: '', end: '' })

Range with limits

<!-- range constrained by min/max (forwarded to the calendar) -->
<bui-datetime-picker mode="range" [months]="2" [(range)]="range" minDate="2026-06-01" maxDate="2026-06-30" />

API reference

Inputs

Prop	Type	Default	Description
`mode`	`CalendarMode`	`'single'`	`single` (default) or `range`.
`months`	`number`	`1`	Month grids shown in the popover (handy for range).
`placeholder`	`string`	—	Text shown on the trigger when nothing is selected. Falls back to `provideBuiLabels`.
`timeLabel`	`string`	—	Label for the time field in the popover. Falls back to `provideBuiLabels`.
`minDate`	`string`	`''`	Earliest selectable date (`yyyy-mm-dd`).
`maxDate`	`string`	`''`	Latest selectable date (`yyyy-mm-dd`).
`captionLayout`	`"dropdown" \| "label"`	`'label'`	`dropdown` swaps the month label for month + year selects.
`seconds`	`boolean`	`false`	Whether to include seconds in the time field.
`timeMode`	`TimeFieldMode`	`'input'`	How the popover's time field renders. The default native `input` is drawn by the browser in its language, so it can disagree with a trigger formatted in `locale`; `select` follows `locale` instead and keeps the whole picker on one clock.
`locale`	`string`	—	BCP 47 locale for the trigger text and the calendar. Defaults to the app's `LOCALE_ID`.
`dateFormat`	`Intl.DateTimeFormatOptions`	`DEFAULT_DATE_FORMAT`	`Intl.DateTimeFormat` options for the trigger text. Replaces the default wholesale, so `{ dateStyle: 'short', timeStyle: 'short' }` is valid (options cannot be mixed with it).

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Selected date-time (mode="single") as `YYYY-MM-DDTHH:mm`. Two-way bindable with `[(value)]`.
`range`	`CalendarRange`	`{ start: '', end: '' }`	Selected range when mode="range" — start/end as `YYYY-MM-DDTHH:mm`, sharing one time.
`disabled`	`boolean`	`false`	Whether the picker is disabled. Two-way bindable with `[(disabled)]`.

Types

CalendarMode — Selection behavior of the calendar.

"multiple" | "range" | "single"

CalendarRange

Field	Type	Description
`start`	`string`	Start date of the range, as `yyyy-mm-dd`.
`end`	`string`	End date of the range, as `yyyy-mm-dd`.

TimeFieldMode — How the time field renders: native input or hour/minute selects.

"input" | "select"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.