API компонента Выбор даты

Импорт

import-date-picker.ts

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

NuiDateField

Дата или дата со временем, вводимые по сегментам.

Селектор: nui-date-field

NuiDateField: Свойства
Имя	Тип	По умолчанию	Описание
`value`Двусторонний	`NuiDate \| NuiDateTime \| null`	`null`	Значение или null, пока не заполнены все сегменты.
`granularity`Input	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Поле заканчивается днём или продолжается до часов, минут или секунд.
`min, max`Input	`string \| null`		Самое раннее и самое позднее значения. За их пределами значение поля недопустимо.
`placeholder`Input	`string \| null`	`now`	Значение, от которого стрелки начинают отсчёт в пустых сегментах.
`hourCycle`Input	`12 \| 24`		12- или 24-часовой формат. По умолчанию — как в локали.
`minuteStep`Input	`number`	`1`	На сколько клавиши-стрелки меняют минуты.
`disabled, readonly`Input	`boolean`	`false`	Запрещают изменения.
`locale`Input	`string`	`LOCALE_ID`	Задаёт порядок, разделители, цифры и формат часов.
`labels`Input	`Partial<NuiDateFieldLabels>`		Все озвучиваемые полем тексты — для перевода.
`invalid`Свойство	`Signal<boolean>`		Выходит ли значение за пределы `min` и `max`.
`focus`Метод	`() => void`		Переводит фокус на первый пустой сегмент.

NuiTimeField

Время суток, вводимое по сегментам. Принимает те же входные свойства, что и поле даты.

Селектор: nui-time-field

NuiTimeField: Свойства
Имя	Тип	По умолчанию	Описание
`granularity`Input	`'hour' \| 'minute' \| 'second'`	`'minute'`	Поле заканчивается часами, минутами или секундами.

NuiDatePicker

Поле даты с календарём в popover. Принимает входные свойства поля даты, а также следующие.

Селектор: nui-date-picker

NuiDatePicker: Свойства
Имя	Тип	Описание
`unavailable`Input	`(date: NuiDate) => boolean`	Дни, которые нельзя выбрать в календаре.
`firstDay, weekNumbers`Input	`1 … 7, boolean`	Передаются календарю.
`labels`Input	`Partial<NuiDatePickerLabels>`	Тексты поля, кнопки и календаря.
`corners`Input	`NuiCorners`	Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Input	`NuiRadius`	Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Input	`NuiDensity`	Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`show`Метод	`() => void`	Открывает календарь.

Если входное свойство настройки не задано, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiDateRangePicker

Два поля даты с календарём для диапазона. Принимает входные свойства выбора даты, а также следующие.

Селектор: nui-date-range-picker

NuiDateRangePicker: Свойства
Имя	Тип	По умолчанию	Описание
`value`Двусторонний	`NuiDateRange \| null`	`null`	Диапазон или null, пока оба конца не заданы по порядку.
`presets`Input	`NuiDateRangePreset[]`	`[]`	Именованные диапазоны для выбора одним кликом.
`months`Input	`number`	`2`	Сколько месяцев календарь показывает рядом.

NuiDateRangePreset

Именованный диапазон: фиксированный или вычисляемый в момент выбора.

NuiDateRangePreset: Свойства
Имя	Тип	По умолчанию	Описание
`label`Свойство	`string`		Его название.
`range`Свойство	`NuiDateRange \| (() => NuiDateRange)`		Диапазон или функция, которая его создаёт.