Needless UI

元件

日曆

選取單一日期、日期範圍或多個日期，也能用鍵盤操作。

匯入

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

NuiCalendar

用來選取日期的日曆。

選擇器
nui-calendar
名稱型別預設值說明
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

一段日期範圍。

名稱型別預設值說明
start, end屬性NuiDate第一天和最後一天，兩端都包含在內。