Date input
@xui/date-inputA date field: a text input paired with a popover calendar. Type a date or pick one from the calendar. [(value)] two-way binding.
Install
pnpm add @xui/date-input Add the barrel to a standalone component's imports:
import { XuiDateInputImports } from '@xui/date-input';
@Component({
imports: [XuiDateInputImports],
// …
})Examples
Default
Loading preview…
<div>
<xui-date-input [(value)]="value" />
<p class="text-foreground-muted mt-3 text-sm">Value: {{ value ? value.toDateString() : '—' }}</p>
</div>Range input
Loading preview…
<xui-date-range-input [(value)]="range" />Timezone select
Loading preview…
<div class="w-72">
<xui-timezone-select [(value)]="zone" />
<p class="text-foreground-muted mt-3 text-sm">Zone: {{ zone }}</p>
</div>API
A date field: a text input paired with a popover calendar. Type a date (parsed best-effort, or via a custom parseDate) or pick one from the calendar. [(value)] two-way binding; T is the active DateAdapter's type (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. Dates before it are disabled in the calendar and rejected when typed.nullmaxT | nullLatest selectable date. Dates after it are disabled in the calendar and rejected when typed.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 calendar starts on, 0 for Sunday through 6 for Saturday.0placeholderstringText shown in the empty field. Also the hint about the expected format, so keep it in step with parseDate.'YYYY-MM-DD'disabledbooleanBlock interaction and dim the field.falsecloseOnSelectionbooleanClose the calendar as soon as a date is picked. Turn it off to leave it open for a second look.truelocalestring | undefinedBCP 47 tag used to format the displayed date and the calendar's labels. Defaults to the runtime locale.undefinedformatDate(date: T, locale?: string) => stringFormat a value for the input. Defaults to a locale short date.defaultXDateFormat(this.adapter)parseDate(text: string) => T | nullParse typed text into a value, or null if it can't. Defaults to Date.parse.defaultXDateParse