Needless UI

コンポーネント

日付ピッカー

日付や時刻をセグメントごとに入力するか、カレンダーから選びます。

インポート

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

NuiDateField

セグメントごとに入力する日付、または日付と時刻。

セレクター
nui-date-field
名前型デフォルト説明
value双方向NuiDate | NuiDateTime | nullnull値。すべてのセグメントが埋まるまでは null です。
granularity入力'day' | 'hour' | 'minute' | 'second''day'日で止めるか、時、分、秒まで続けるか。
min, max入力string | null最も早い値と最も遅い値。範囲外の値ではフィールドが無効になります。
placeholder入力string | nullnow空のセグメントで矢印キーを押したときの起点となる値。
hourCycle入力12 | 2412時間制または24時間制。デフォルトはロケールに従います。
minuteStep入力number1矢印キーで分が変わる幅。
disabled, readonly入力booleanfalse変更できなくします。
locale入力stringLOCALE_ID順序、区切り文字、数字、時間制を決めるロケール。
labels入力Partial<NuiDateFieldLabels>フィールドが読み上げるすべてのテキスト。翻訳に使います。
invalidプロパティSignal<boolean>値が min と max の範囲外かどうか。
focusメソッド() => void最初の空のセグメントにフォーカスします。

NuiTimeField

セグメントごとに入力する時刻。日付フィールドと同じ入力を受け取ります。

セレクター
nui-time-field
名前型デフォルト説明
granularity入力'hour' | 'minute' | 'second''minute'時、分、秒のどこまで入力するか。

NuiDatePicker

ポップオーバーのカレンダーが付いた日付フィールド。日付フィールドの入力に加えて、次の入力を受け取ります。

セレクター
nui-date-picker
名前型デフォルト説明
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-* 属性に従います。詳しくはカスタマイズガイドをご覧ください。

NuiDateRangePicker

期間用のカレンダーが付いた2つの日付フィールド。日付ピッカーの入力に加えて、次の入力を受け取ります。

セレクター
nui-date-range-picker
名前型デフォルト説明
value双方向NuiDateRange | nullnull期間。両端が正しい順序で設定されるまでは null です。
presets入力NuiDateRangePreset[][]1クリックで選べる、名前付きの期間。
months入力number2カレンダーに並べて表示する月の数。

NuiDateRangePreset

名前付きの期間。固定の期間か、選ばれたときに作られる期間です。

名前型デフォルト説明
labelプロパティstring名前。
rangeプロパティNuiDateRange | (() => NuiDateRange)期間、または期間を作る関数。