Date range picker
@xui/date-range-pickerA multi-month calendar for choosing a date range. First click sets the start, the second the end (hovering previews the span); clicking again starts over. [(value)] two-way binding, months (1 or 2), min/max/dateFilter, allowSingleDayRange.
Install
pnpm add @xui/date-range-picker Add the barrel to a standalone component's imports:
import { XuiDateRangePickerImports } from '@xui/date-range-picker';
@Component({
imports: [XuiDateRangePickerImports],
// …
})Examples
Default
Loading preview…
<div>
<xui-date-range-picker [(value)]="range" />
<p class="text-foreground-muted mt-3 text-sm">
{{ range.start ? range.start.toDateString() : '—' }} → {{ range.end ? range.end.toDateString() : '—' }}
</p>
</div>Single month
Loading preview…
<xui-date-range-picker [(value)]="range" [months]="1" allowSingleDayRange />API
A multi-month calendar for choosing a date range. The first click sets the start, the second the end (hovering previews the span); clicking again starts a new range. [(value)] two-way binding; T is the active DateAdapter's type. It is a full ControlValueAccessor, so ngModel/formControl bind to it directly.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valueXuiDateRange<T>The chosen range. Two-way bindable with [(value)].{ start: null, end: null }minT | nullEarliest selectable date, for both ends of the range.nullmaxT | nullLatest selectable date, for both ends of the range.nulldateFilter((date: T) => boolean) | nullPer-date predicate for holes that min/max cannot express — weekends, blackout days. Return false to disable a date.nullfirstDayOfWeeknumberWhich weekday each grid starts on, 0 for Sunday through 6 for Saturday.0localestring | undefinedBCP 47 tag used for the weekday and month labels. Defaults to the runtime locale.undefinedmonthsnumberHow many contiguous months to show (1 or 2).2allowSingleDayRangebooleanAllow the start and end to be the same day.falsedisabledbooleanBlock interaction and dim both calendars.false