Date range input
@xui/date-range-inputA date-range field: two text inputs (start → end) sharing one popover range calendar. Focusing either field opens the picker; typing a boundary parses just that end. The value is an XuiDateRange — { start, end }, either boundary null while selecting — bound with [(value)] or a form control.
Install
pnpm add @xui/date-range-input Add the barrel to a standalone component's imports:
import { XuiDateRangeInputImports } from '@xui/date-range-input';
@Component({
imports: [XuiDateRangeInputImports],
// …
})Examples
Default
Loading preview…
<div>
<xui-date-range-input [(value)]="range" />
<p class="text-foreground-muted mt-3 text-sm">
{{ range.start ? range.start.toDateString() : '—' }} → {{ range.end ? range.end.toDateString() : '—' }}
</p>
</div>Reactive form
Loading preview…
<div>
<xui-date-range-input [formControl]="stay" />
<p class="text-foreground-muted mt-3 text-sm">
Form value: {{ stay.value?.start?.toDateString() ?? '—' }} → {{ stay.value?.end?.toDateString() ?? '—' }}
</p>
</div>Min max
Loading preview…
<xui-date-range-input [(value)]="range" [min]="min" [max]="max" allowSingleDayRange />Disabled
Loading preview…
<xui-date-range-input disabled [(value)]="range" />API
A date-range field: two text inputs (start → end) that share one popover calendar. Focusing either field opens the range picker; typing a boundary parses just that end. [(value)] two-way binding. 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.nullallowSingleDayRangebooleanAccept a range that starts and ends on the same day. Off by default, so picking one date leaves the range open.falsedisabledbooleanBlock interaction and dim both fields.falsestartPlaceholderstringText shown in the empty start field.'Start date'endPlaceholderstringText shown in the empty end field.'End date'localestring | undefinedBCP 47 tag passed to formatDate and used for the calendar's labels. Defaults to the runtime locale.undefinedformatDate(date: T, locale?: string) => stringTurns a date into the text shown in the field. Defaults to the date adapter's own format; override it together with parseDate so the two agree.defaultXDateFormat(this.adapter)parseDate(text: string) => T | nullTurns typed text back into a date, or null when it does not parse. The inverse of formatDate.defaultXDateParse