chrome:seo.title.page

chrome:demo.preview

demo-preview:hints.category.navigation:

Tab

↑ ↓ ← →

demo-preview:hints.category.shortcuts:

Enter / Space

Escape

demo-preview:projection.slots-label:

[xStart]

[xEnd]

import { Component } from '@angular/core';

import { XDatepicker } from '@xngui/components/datepicker';

import { XForm } from '@xngui/components/form';

import { XFormField } from '@xngui/components/form-field';

@Component({

selector: 'app-example',

imports: [XDatepicker, XForm, XFormField],

templateUrl: './datepicker.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

mode

XDatepickerMode

'date'

Picker granularity — date only, date + time, or time only.

selectionMode

XCalendarMode

'single'

Calendar selection mode — single day or date range.

calendar

XCalendarSystem

'gregory'

Intl calendar identifier for the embedded XCalendar.

size

XSize

—

Visual size tier — falls back to XConfigService when unset.

density

XDensity

—

Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.

placeholder

string

—

Placeholder in the typable field — defaults to the mask pattern for `mode` and `dateFormat` when unset.

look

XFormLook

—

Field chrome — outline, fill, flat, or none; falls back to XForm then XConfigService.

locale

string

—

BCP 47 locale for formatting the displayed value — falls back to XLocaleService when unset.

dateFormat

XDatepickerTextFormatInput

'auto'

Masked typing layout — `us`, `iso`, or `auto` from `locale`.

min

Date

—

Earliest selectable date — forwarded to the embedded XCalendar.

max

Date

—

Latest selectable date — forwarded to the embedded XCalendar.

firstDayOfWeek

number

—

First day of the week in the embedded calendar (`0` = Sunday) — falls back to the resolved locale when unset.

dateFilter

XCalendarDateFilter

—

Predicate forwarded to the embedded XCalendar — returns `false` for disabled dates.

ariaLabel

string

—

Accessible name for the embedded calendar grid.

prevMonthLabel

string

—

Accessible label for the previous-month control in the embedded calendar.

nextMonthLabel

string

—

Accessible label for the next-month control in the embedded calendar.

prevYearLabel

string

—

Accessible label for the previous-year control in the embedded calendar month view.

nextYearLabel

string

—

Accessible label for the next-year control in the embedded calendar month view.

prevYearsLabel

string

—

Accessible label for the previous-year-page control in the embedded calendar year view.

nextYearsLabel

string

—

Accessible label for the next-year-page control in the embedded calendar year view.

chooseMonthLabel

string

—

Accessible label for the month-picker header button in the embedded calendar.

chooseYearLabel

string

—

Accessible label for the year-picker header button in the embedded calendar.

minuteStep

number

1

Minute increment in the time picker.

openLabel

string

—

Accessible label for the open trigger.

closeLabel

string

—

Accessible label for the close trigger.

hourLabel

string

—

Accessible label for the hour column in the time picker.

minuteLabel

string

—

Accessible label for the minute column in the time picker.

applyLabel

string

—

Accessible label for the apply-time action.

nowLabel

string

—

Accessible label for the set-to-now action.

timeHeadingLabel

string

—

Heading above the time controls in datetime mode.

dateTabLabel

string

—

Tab label for the date panel in datetime mode.

timeTabLabel

string

—

Tab label for the time panel in datetime mode.

dateTimeTabsLabel

string

—

Accessible name for the date/time tab list in datetime mode.

disabled

boolean

false

Prevents interaction and sets `aria-disabled` on the field.

readonly

boolean

false

Value-only input — user cannot change when true.

invalid

boolean

false

Marks the control invalid for styling and ARIA.

required

boolean

false

Marks the control as required for validation and ARIA.

name

string

''

Native form control `name` attribute.

controlId

string

—

Native `id` on the inner input; falls back to `name`, then a generated id.

generated:catalog.entry.datepicker.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-datepicker

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title