Needless UI

Компоненты

Календарь

Выбор дня, диапазона или нескольких дней — в том числе с клавиатуры.

Импорт

import-calendar.ts
import { NuiCalendar, type NuiDateRange } from '@needless-ui/angular/calendar';

NuiCalendar

Календарь для выбора дней.

Селектор
nui-calendar
ИмяТипПо умолчаниюОписание
selectionInput'single' | 'range' | 'multiple''single'Сколько дней можно выбрать.
valueДвустороннийNuiDate | nullnullВыбранный день.
valuesДвустороннийNuiDate[][]Выбранные дни по порядку.
rangeДвустороннийNuiDateRange | nullnullВыбранный диапазон, оба конца включительно.
monthДвустороннийNuiMonth | nullnullПоказанный месяц; если их несколько — первый.
viewДвусторонний'day' | 'month' | 'year''day'Дни, месяцы или годы.
min, maxInputNuiDate | nullПервый и последний дни, которые можно выбрать.
unavailableInput(date: NuiDate) => booleanИсключает другие дни, например праздники.
monthsInputnumber1Сколько месяцев показывать рядом.
weekNumbersInputbooleanfalseПоказывает номера недель по ISO.
firstDayInput1 … 7Первый день недели, 1 — понедельник. По умолчанию — как в локали.
localeInputstringLOCALE_IDФорматирует названия и цифры и определяет первый день недели.
labelsInputPartial<NuiCalendarLabels>Все показываемые и озвучиваемые календарём тексты — для перевода.
cornersInputNuiCornersФорма углов: round, squircle, bevel, scoop, notch или square.
radiusInputNuiRadiusРадиус скругления углов: none, small, medium, large или full.
densityInputNuiDensityСколько места занимает компонент: compact, regular или roomy.
pickedOutputNuiDate | NuiDateRangeПередаёт каждый выбор: день или диапазон, когда он завершён.
focusDateМетод(date?: NuiDate) => voidПереводит фокус клавиатуры на день и показывает его месяц.

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

NuiDateRange

Диапазон дней.

ИмяТипПо умолчаниюОписание
start, endСвойствоNuiDateПервый и последний дни, оба включительно.