Date picker

A date input with a calendar popover.

import { BuiDatePicker } from 'ng-blatui';

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

Custom placeholder

<bui-date-picker [(value)]="date" placeholder="Choose a date…" />

Min / max

<bui-date-picker [(value)]="date" minDate="2026-01-01" maxDate="2026-12-31" />

With label

<div buiField>
  <label buiFieldLabel for="dob">Date of birth</label>
  <bui-date-picker id="dob" [(value)]="date" />
</div>

Week starts Monday

<!-- forwards weekStart to the inner calendar -->
<bui-date-picker [(value)]="date" [weekStart]="1" />

Disabled dates

<bui-date-picker [(value)]="date" [disabledDates]="['2026-06-10']" [disableWeekends]="true" />

Week numbers

<bui-date-picker [(value)]="date" [showWeekNumbers]="true" />

With dropdown

<!-- forwards captionLayout to the calendar -->
<bui-date-picker [(value)]="date" captionLayout="dropdown" />

No outside days

<bui-date-picker [(value)]="date" [hideOutsideDays]="true" />

Range

<!-- mode="range" + [months]="2" for a two-month range picker -->
<bui-date-picker mode="range" [months]="2" [(range)]="range" placeholder="Pick a range" />
// range = signal({ start: '', end: '' })

Reactive form

Control value: 2026-06-15

<!-- ControlValueAccessor: works with formControl / ngModel / signal forms -->
<bui-date-picker [formControl]="dateForm" />
// dateForm = new FormControl('2026-06-15')

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 no date is selected. Falls back to `provideBuiLabels`.
`minDate`	`string`	`''`	Earliest selectable date (`yyyy-mm-dd`).
`maxDate`	`string`	`''`	Latest selectable date (`yyyy-mm-dd`).
`weekStart`	`number`	—	First day of the week (0 = Sunday). Defaults to the locale's own convention.
`disabledDates`	`readonly string[]`	`[]`	Specific ISO dates (yyyy-mm-dd) to disable.
`disableWeekends`	`boolean`	`false`	Disable Saturdays and Sundays.
`showWeekNumbers`	`boolean`	`false`	Show an ISO week-number column in the calendar.
`captionLayout`	`"dropdown" \| "label"`	`'label'`	`dropdown` swaps the month label for month + year selects.
`hideOutsideDays`	`boolean`	`false`	Hide days that fall outside the current month.
`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' }` renders `16/07/2026` in `fr` (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 (mode="single") as `yyyy-mm-dd`. Two-way bindable with `[(value)]`.
`range`	`CalendarRange`	`{ start: '', end: '' }`	Selected range when mode="range".
`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`.

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