Date picker API · Needless UI

Import

import-date-picker.ts

import {
  NuiDateField,
  NuiDatePicker,
  NuiDateRangePicker,
  NuiTimeField,
} from '@needless-ui/angular/date-picker';

A date, or a date and time, typed in segments.

NuiDateField: Properties
Name	Type	Default	Description
`value`Two-way	`NuiDate \| NuiDateTime \| null`	`null`	The value, or null until every segment is filled.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Stops at the day, or goes on to the hour, minute or second.
`min, max`Input	`string \| null`		The earliest and latest values. Outside them, the field is invalid.
`placeholder`Input	`string \| null`	`now`	Where empty segments start from with the arrow keys.
`hourCycle`Input	`12 \| 24`		A 12- or 24-hour clock. By default, the locale’s.
`minuteStep`Input	`number`	`1`	How far the arrow keys move the minutes.
`disabled, readonly`Input	`boolean`	`false`	Stop changes.
`locale`Input	`string`	`LOCALE_ID`	Sets the order, separators, digits and clock.
`labels`Input	`Partial<NuiDateFieldLabels>`		Every text the field says, to translate.
`invalid`Property	`Signal<boolean>`		Whether the value is outside `min` and `max`.
`focus`Method	`() => void`		Focuses the first empty segment.

A time of day typed in segments. It takes the same inputs as the date field.

NuiTimeField: Properties
Name	Type	Default	Description
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	Stops at the hour, minute or second.

A date field with a calendar in a popover. It takes the date field’s inputs, and these.

NuiDatePicker: Properties
Name	Type	Description
`unavailable`Input	`(date: NuiDate) => boolean`	Days the calendar won’t pick.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Passed to the calendar.
`labels`Input	`Partial<NuiDatePickerLabels>`	The texts of the field, the button and the calendar.
`corners`Input	`NuiCorners`	The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`	How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`	How much room it takes: `compact`, `regular` or `roomy`.
`show`Method	`() => void`	Opens the calendar.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

Two date fields with a range calendar. It takes the date picker’s inputs, and these.

NuiDateRangePicker: Properties
Name	Type	Default	Description
`value`Two-way	`NuiDateRange \| null`	`null`	The range, or null until both ends are set, in order.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Named ranges to choose in one click.
`months`Input	`number`	`2`	Months side by side in the calendar.

A named range, fixed or made when chosen.

NuiDateRangePreset: Properties
Name	Type	Default	Description
`label`Property	`string`		Its name.
`range`Property	`NuiDateRange \| (() => NuiDateRange)`		The range, or a function that makes it.