导入

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

NuiCalendar

用于选择日期的日历。

选择器
nui-calendar
NuiCalendar: 属性
名称类型默认值说明
selection输入'single' | 'range' | 'multiple''single'可以选择多少个日期。
value双向绑定NuiDate | nullnull选中的日期。
values双向绑定NuiDate[][]选中的多个日期,按先后顺序排列。
range双向绑定NuiDateRange | nullnull选中的范围,包含两端。
month双向绑定NuiMonth | nullnull显示的月份;同时显示多个月份时为第一个。
view双向绑定'day' | 'month' | 'year''day'日、月或年视图。
min, max输入NuiDate | null可选择的第一天和最后一天。
unavailable输入(date: NuiDate) => boolean排除其他日期,例如节假日。
months输入number1并排显示的月份数。
weekNumbers输入booleanfalse显示 ISO 周数。
firstDay输入1 … 7一周的第一天,1 表示星期一。默认遵循语言环境。
locale输入stringLOCALE_ID用于格式化名称和数字,并决定一周的第一天。
labels输入Partial<NuiCalendarLabels>日历显示或播报的所有文本,供翻译使用。
corners输入NuiCorners边角的形状:round、squircle、bevel、scoop、notch 或 square。
radius输入NuiRadius边角的大小:none、small、medium、large 或 full。
density输入NuiDensity占用的空间:compact、regular 或 roomy。
picked输出NuiDate | NuiDateRange每次选择时发出:一个日期,或选完两端后的范围。
focusDate方法(date?: NuiDate) => void将键盘焦点移到某一天,并显示它所在的月份。

用于自定义的输入属性如果未设置,会沿用最近的 data-nui-* 属性。详见自定义指南。

NuiDateRange

一个日期范围。

NuiDateRange: 属性
名称类型默认值说明
start, end属性NuiDate第一天和最后一天,两端都包含在内。