Date picker
@xui/date-pickerAn inline month calendar. Click a day to select it; arrow keys move by day/week, PageUp/PageDown by month, Home/End to the week ends, Enter/Space select. [(value)] two-way binding, min/max/dateFilter, an optional Today/Clear action bar. Uses the app's DateAdapter (native Date by default).
Install
pnpm add @xui/date-picker Add the barrel to a standalone component's imports:
import { XuiDatePickerImports } from '@xui/date-picker';
@Component({
imports: [XuiDatePickerImports],
// …
})Examples
Default
Loading preview…
<div>
<xui-date-picker [(value)]="selected" showActionsBar />
<p class="text-foreground-muted mt-3 text-sm">Selected: {{ selected ? selected.toDateString() : '—' }}</p>
</div>Constrained
Loading preview…
<xui-date-picker [(value)]="selected" [min]="min" [max]="max" [dateFilter]="noWeekends" />API
An inline month calendar. Click a day to select it; arrow keys move by day/week, PageUp/PageDown by month, Home/End to week ends, Enter/Space select. [(value)] two-way binding. T is the date type of the active DateAdapter (a Date by default). 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.''valueT | nullThe selected date. Two-way bindable with [(value)].nullminT | nullEarliest selectable date. Earlier days are rendered disabled.nullmaxT | nullLatest selectable date. Later days are rendered disabled.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 the 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.undefinedshowActionsBarbooleanShow a Today/Clear action bar under the grid.falsedisabledbooleanBlock interaction and dim the calendar.false