Bloc UIBloc UI

Date Picker

Trigger-based date picker — attach to any element, no wrappers required. Works with ngModel, formControl, and formControlName.

$ npm install @bloc-ui/date-picker

Basic usage

Default

A plain button that opens the calendar on click.

Custom element

Any element can be a trigger — here a styled <div>.

Template-driven (ngModel)

Two-way binding

ngModel value: null

Reactive forms

FormControl

value: null

Disabled

formControlName

Inside a FormGroup via formControlName.

group value: null

Min / Max date

Date range constraint

Only dates between Jan 2024 and Dec 2026 are selectable.

Custom token

Green accent

Override colours via CSS custom properties on the trigger.