Needless UI

コンポーネント

カレンダー

1つの日付、期間、複数の日付を選べます。キーボードでも操作できます。

インポート

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入力booleanfalseISO 週番号を表示します。
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最初の日と最後の日。どちらも期間に含まれます。