日期選擇器 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'`	停在小時、分鐘或秒。

附有 Popover 日曆的日期欄位。它接受日期欄位的輸入屬性，以及下列屬性。

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)`		範圍，或產生範圍的函式。