日期选择器 API · Needless UI

导入

import-date-picker.ts

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

按分段输入的日期，或日期和时间。

NuiDateField: 属性
名称	类型	默认值	说明
`value`双向绑定	`NuiDate \| NuiDateTime \| null`	`null`	值；在所有分段都填好之前为 null。
`granularity`输入	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	停在日，或继续到小时、分钟或秒。
`min, max`输入	`string \| null`		最早和最晚的值。超出这个范围时，输入框的值无效。
`placeholder`输入	`string \| null`	`now`	空分段用方向键调整时的起始值。
`hourCycle`输入	`12 \| 24`		12 或 24 小时制。默认遵循语言环境。
`minuteStep`输入	`number`	`1`	方向键每次调整分钟的幅度。
`disabled, readonly`输入	`boolean`	`false`	禁止修改。
`locale`输入	`string`	`LOCALE_ID`	决定顺序、分隔符、数字和小时制。
`labels`输入	`Partial<NuiDateFieldLabels>`		输入框播报的所有文本，供翻译使用。
`invalid`属性	`Signal<boolean>`		值是否超出 `min` 和 `max` 的范围。
`focus`方法	`() => void`		让第一个空分段获得焦点。

按分段输入的时间。它接受与日期输入框相同的输入属性。

NuiTimeField: 属性
名称	类型	默认值	说明
`granularity`输入	`'hour' \| 'minute' \| 'second'`	`'minute'`	停在小时、分钟或秒。

带弹出框日历的日期输入框。它接受日期输入框的输入属性，以及下面这些。

NuiDatePicker: 属性
名称	类型	说明
`unavailable`输入	`(date: NuiDate) => boolean`	日历中不可选择的日期。
`firstDay, weekNumbers`输入	`1 … 7, boolean`	传给日历。
`labels`输入	`Partial<NuiDatePickerLabels>`	输入框、按钮和日历的文本。
`corners`输入	`NuiCorners`	边角的形状：`round`、`squircle`、`bevel`、`scoop`、`notch` 或 `square`。
`radius`输入	`NuiRadius`	边角的大小：`none`、`small`、`medium`、`large` 或 `full`。
`density`输入	`NuiDensity`	占用的空间：`compact`、`regular` 或 `roomy`。
`show`方法	`() => void`	打开日历。

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

两个日期输入框加一个范围日历。它接受日期选择器的输入属性，以及下面这些。

具名范围，可以是固定的，也可以在选择时生成。

NuiDateRangePreset: 属性
名称	类型	默认值	说明
`label`属性	`string`		它的名称。
`range`属性	`NuiDateRange \| (() => NuiDateRange)`		范围，或生成范围的函数。