Date range picker

A start→end range picker with presets, on the CDK overlay.

import { BuiDateRangePicker } from 'ng-blatui';

<!-- start→end range, quick-pick presets, never clipped (CDK overlay) -->
<bui-date-range-picker [(value)]="range" />

Selected range

Value: — → —

API reference

Inputs

Prop	Type	Default	Description
`months`	`number`	`2`	Month grids shown side by side in the popover.
`minDate`	`string`	`''`	Earliest selectable date (`yyyy-mm-dd`).
`maxDate`	`string`	`''`	Latest selectable date (`yyyy-mm-dd`).
`placeholder`	`string`	—	Text shown on the trigger when nothing is selected. Falls back to `provideBuiLabels`.
`presets`	`DateRangePreset[] \| null`	`null`	Quick-pick shortcuts. Pass `[]` to hide them; omit for a sensible default set.
`aria-label`	`string`	`''`	Accessible name applied to the trigger.
`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`	`CalendarRange`	`{ start: '', end: '' }`	Selected range as `yyyy-mm-dd` bounds. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the picker is disabled. Two-way bindable with `[(disabled)]`.

Types

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`.

DateRangePreset — A named shortcut shown beside the calendar, e.g. "Last 7 days".

Field	Type	Description
`label`	`string`	Text shown for the shortcut.
`range`	`CalendarRange`	The range it applies, as `yyyy-mm-dd` bounds.

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