カレンダーが閉じた後に発生します。
<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
キャンセル可能なカレンダーの終了時に発生します。
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
ピッカーを有効または無効にします。
<igx-date-picker [disabled]="'true'"></igx-date-picker>
編集可能な入力がフォーカスされていない場合に使用される書式。
Angular の DatePipe を使用します。
<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>
表示される月ビューの数。
デフォルト値は 2 です。
<igx-date-range-picker [displayMonthsCount]="3"></igx-date-range-picker>
選択した日付または渡された日付に適用されるカスタム フォーマッター関数。
private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });
public formatter(date: Date): string {
return `${this.dayFormatter.format(date)} - ${this.monthFormatter.format(date)} - ${date.getFullYear()}`;
}
<igx-date-range-picker [formatter]="formatter"></igx-date-range-picker>
現在の月以外の日付を表示するかどうかを取得または設定します。
デフォルト値は false です。
<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker>
予想されるユーザー入力形式とプレースホルダー。
デフォルトは "'MM/dd/yyyy'"
<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>
編集可能な入力フィールドの dropdown または読み取り専用の入力フィールドの dialog になります。
デフォルトのモードは dropdown
<igx-date-picker mode="dialog"></igx-date-picker>
カレンダーが開いた後に発生します。
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
キャンセル可能なカレンダーの開始時に発生します。
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
ポップアップ要素に使用されるコンテナーを取得または設定します。
outlet は、IgxOverlayOutletDirective または ElementRef のインスタンスです。
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-date-range-picker [outlet]="outlet"></igx-date-range-picker>
//..
カレンダーの表示に使用するカスタム オーバーレイ設定です。
<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>
単一入力の IgxDateRangePickerComponent の placeholder を設定します。
<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>
週番号を表示/非表示します。
デフォルトは false です。
<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker>
``
デフォルトのテンプレート エディターの tabindex を取得または設定します。
<igx-date-picker [tabIndex]="1"></igx-date-picker>
ピッカーの値が変更されたときに発生されます。双方向バインディングに使用されます。
<igx-date-range-picker [(value)]="date"></igx-date-range-picker>
カレンダーの状態を取得します。
let state = this.dateRange.collapsed;
コンポーネントのテーマを返します。デフォルトのテーマは
comfortable です。
利用可能なオプションは comfortable、cosy、または compact です。
let componentTheme = this.component.displayDensity;
コンポーネントのテーマを設定します。
カレンダー ダイアログの
デフォルトでは、リソース文字列の値 (組み込み EN の場合は Done ) になります。ボタンは dialog モードでのみ表示されます。
<igx-date-range-picker doneButtonText="Done"></igx-date-range-picker>
date-picker の locale を取得します。
設定されていない場合、デフォルトでアプリケーションのロケールになります。
date-picker のlocale を設定します。
有効な BCP 47 言語タグに設定します。
有効な範囲の最大値です。
<igx-date-range-picker [maxValue]="maxDate"></igx-date-range-picker>
有効な範囲の最小値です。
<igx-date-range-picker [minValue]="minDate"></igx-date-range-picker>
リソース文字列を返すアクセサーです。
リソース文字列を設定するアクセサーです。 デフォルトで EN リソースを使用します。
ピッカーの入力のスタイル設定を決定します。
デフォルト値は box です。
<igx-date-picker [type]="'line'"></igx-date-picker>
週の最初の曜日を取得します。 曜日の数値または列挙型の表現を返します。 設定されていない場合、デフォルトでアプリケーション ロケールの週の初日になります。
週の最初の曜日を設定します。
数値または WEEKDAYS の列挙型の値に割り当てます。
表示密度の値に基づいて --component-size CSS 変数を設定します。
Date Range Picker のドロップダウンまたはダイアログを開きます。
<igx-date-range-picker #dateRange></igx-date-range-picker>
<button type="button" igxButton (click)="dateRange.open()">Open Dialog</button
日付の範囲を選択します。endDate が渡されていない場合、範囲は 1 日 (startDate のみ) です。
public selectFiveDayRange() {
const today = new Date();
const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
this.dateRange.select(today, inFiveDays);
}
Date Range Picker のドロップダウンまたはダイアログを切り替えます。
<igx-date-range-picker #dateRange></igx-date-range-picker>
<button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button>
カレンダー UI または編集可能な入力から日付の範囲を選択する機能を提供します。
Igx Module
IgxDateRangeModule
Igx Theme
igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme
Igx Keywords
date, range, date range, date picker
Igx Group
スケジュール
備考
範囲の選択が 1 つまたは 2 つの入力フィールドに表示されます。デフォルトのテンプレートは単一の読み取り専用入力フィールドを表示しますが、
igx-date-range-startとigx-date-range-endを投影すると 2 つの編集可能な入力フィールドが表示されます。例