导入
import { NuiCalendar, type NuiDateRange } from '@needless-ui/angular/calendar';NuiCalendar
用于选择日期的日历。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
selection输入 | 'single' | 'range' | 'multiple' | 'single' | 可以选择多少个日期。 |
value双向绑定 | NuiDate | null | null | 选中的日期。 |
values双向绑定 | NuiDate[] | [] | 选中的多个日期,按先后顺序排列。 |
range双向绑定 | NuiDateRange | null | null | 选中的范围,包含两端。 |
month双向绑定 | NuiMonth | null | null | 显示的月份;同时显示多个月份时为第一个。 |
view双向绑定 | 'day' | 'month' | 'year' | 'day' | 日、月或年视图。 |
min, max输入 | NuiDate | null | 可选择的第一天和最后一天。 | |
unavailable输入 | (date: NuiDate) => boolean | 排除其他日期,例如节假日。 | |
months输入 | number | 1 | 并排显示的月份数。 |
weekNumbers输入 | boolean | false | 显示 ISO 周数。 |
firstDay输入 | 1 … 7 | 一周的第一天,1 表示星期一。默认遵循语言环境。 | |
locale输入 | string | LOCALE_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
一个日期范围。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
start, end属性 | NuiDate | 第一天和最后一天,两端都包含在内。 |