Date Range Picker
Range date picker with auto-sorting — click any two dates in any order, the range is always correct. Trigger-based: attach to any element. Works with ngModel, formControl, and FormGroup.
$ npm install @bloc-ui/date-picker
Basic range
Default
Click the first date, then click the second — range is auto-sorted.
Template-driven (ngModel)
Two-way binding
from: null to: null
Reactive forms
FormControl
from: null to: null
FormGroup
Pass a FormGroup with from / to controls — they update individually.
from control: null to control: null
Min / Max date
Constrained range
Only dates between Jan 2024 and Dec 2026 are selectable.
Custom token
Custom colour
Override range picker colours via CSS custom properties on the trigger.