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')