Class IgxDateRangePickerComponent

カレンダー UI または編集可能な入力から日付の範囲を選択する機能を提供します。

IgxDateRangeModule

igx-input-group-theme, igx-calendar-theme, igx-date-range-picker-theme

date, range, date range, date picker

スケジュール

範囲の選択が 1 つまたは 2 つの入力フィールドに表示されます。デフォルトのテンプレートは単一の読み取り専用入力フィールドを表示しますが、igx-date-range-startigx-date-range-end を投影すると 2 つの編集可能な入力フィールドが表示されます。

<igx-date-range-picker mode="dropdown"></igx-date-range-picker>

階層

Hierarchy (View Summary)

実装

  • OnChanges
  • OnInit
  • AfterViewInit
  • OnDestroy
  • ControlValueAccessor
  • Validator

コンストラクター

プロパティ

closed: EventEmitter<IBaseEventArgs> = ...

カレンダーが閉じた後に発生します。

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

キャンセル可能なカレンダーの終了時に発生します。

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
customRanges: CustomDateRange[] = []

チップとしてレンダリングされるカスタム範囲。

<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
disabled: boolean = false

ピッカーを有効または無効にします。

<igx-date-picker [disabled]="'true'"></igx-date-picker>
displayFormat: string

編集可能な入力がフォーカスされていない場合に使用される書式。

Angular の DatePipe を使用します。

<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>
element: ElementRef<any> = ...
formatter: (val: DateRange) => string

選択した日付または渡された日付に適用されるカスタム フォーマッター関数です。

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>

Type declaration

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

IgxDatePickerComponent ヘッダーの向きを取得または設定します。

<igx-date-picker headerOrientation="vertical"></igx-date-picker>
hideHeader: boolean = false

ダイアログ モードでヘッダーを非表示にするかどうかを設定または取得します。

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>
hideOutsideDays: boolean

現在の月以外の日付を表示するかどうかを取得または設定します。

デフォルト値は false です。

<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker>
inputFormat: string

予想されるユーザー入力形式とプレースホルダー。

<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>
mode: PickerInteractionMode = PickerInteractionMode.DropDown

編集可能な入力フィールドの dropdown または読み取り専用の入力フィールドの dialog になります。

デフォルトのモードは dropdown

<igx-date-picker mode="dialog"></igx-date-picker>
opened: EventEmitter<IBaseEventArgs> = ...

カレンダーが開いた後に発生します。

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

キャンセル可能なカレンダーの開始時に発生します。

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal

ピッカーのカレンダー日表示で複数月を表示する際の配置方向を設定または取得します。

<igx-date-range-picker orientation="vertical"></igx-date-range-picker>
outlet: IgxOverlayOutletDirective | ElementRef<any>

ポップアップ要素に使用されるコンテナーを取得または設定します。

outlet は、IgxOverlayOutletDirective または ElementRef のインスタンスです。

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-date-range-picker [outlet]="outlet"></igx-date-range-picker>
//..
overlaySettings: OverlaySettings

カレンダーの表示に使用するカスタム オーバーレイ設定。

<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>
placeholder: string = ''

単一入力の IgxDateRangePickerComponentplaceholder を設定します。

<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>
showWeekNumbers: boolean = false

週番号を表示/非表示します。

デフォルト値は false

<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker>
tabIndex: string | number

デフォルトのテンプレート エディターの tabindex を取得または設定します。

<igx-date-picker [tabIndex]="1"></igx-date-picker>
usePredefinedRanges: boolean = false

組み込みの事前定義済み範囲を表示するかどうか。

<igx-date-range-picker [(usePredefinedRanges)]="true"></igx-date-range-picker>
valueChange: EventEmitter<DateRange> = ...

アクセサー

メソッド