Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス IgxDateRangePickerComponent

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

@igxmodule

IgxDateRangeModule

@igxtheme

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

@igxkeywords

date, range, date range, date picker

@igxgroup

scheduling

@備考:

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

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

階層

  • PickerBaseDirective
    • IgxDateRangePickerComponent

実装

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

Index

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

closed

closed: EventEmitter<IBaseEventArgs> = ...

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

@例:
<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

@例:
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

disabled

disabled: boolean = false

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

@例:
<igx-date-picker [disabled]="'true'"></igx-date-picker>

displayFormat

displayFormat: string

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

@備考

Angular の DatePipe を使用します。

@例:
<igx-date-range-picker displayFormat="EE/M/yy"></igx-date-range-picker>

displayMonthsCount

displayMonthsCount: number = 2

表示される月ビューの数。

@備考:

デフォルトは 2 です。

@例:
<igx-date-range-picker [displayMonthsCount]="3"></igx-date-range-picker>

element

element: ElementRef<any>

formatter

formatter: function

選択した日付または渡した日付にカスタム書式関数。

@例:
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

hideOutsideDays

hideOutsideDays: boolean

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

@備考:

デフォルト値は false です。

@例:
<igx-date-range-picker [hideOutsideDays]="true"></igx-date-range-picker>

inputFormat

inputFormat: string

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

@備考

デフォルトは "'MM/dd/yyyy'" です。

@例:
<igx-date-range-picker inputFormat="dd/MM/yy"></igx-date-range-picker>

label

label: IgxLabelDirective

locale

locale: string

値の書式とカレンダーに使用されるロケール設定。

@備考:

デフォルトでは、Angular の LOCALE_ID を使用します。入力マスクと表示形式が設定されていない場合、両方に影響します。 locale が設定されている場合は、registerLocaleData を介して登録する必要があります。 https://angular.io/guide/i18n#i18n-pipes を参照してください。 登録されていない場合、フォーマットには Intl が使用されます。

@例:
<igx-date-range-picker locale="jp"></igx-date-range-picker>

mode

mode: PickerInteractionMode = ...

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

@備考

デフォルトのモードは dropdown です。

@例:
<igx-date-picker mode="dialog"></igx-date-picker>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

opened

opened: EventEmitter<IBaseEventArgs> = ...

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

@例:
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

@例:
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

outlet

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: OverlaySettings

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

@例:
<igx-date-range-picker [overlaySettings]="customOverlaySettings"></igx-date-range-picker>

pickerActions

pickerActions: IgxPickerActionsDirective

placeholder

placeholder: string = ''

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

@例:
<igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>

tabIndex

tabIndex: string | number

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

@例:
<igx-date-picker [tabIndex]="1"></igx-date-picker>

valueChange

valueChange: EventEmitter<DateRange> = ...

ピッカーの値が変更されたときに発生されます。双方向バインディングに使用されます。

@例:
<igx-date-range-picker [(value)]="date"></igx-date-range-picker>

weekStart

weekStart: WEEKDAYS = ...

週の最初の曜日。

@備考:

数値または WEEKDAYS の列挙型の値に割り当てます。

@例:
<igx-date-range-picker [weekStart]="1"></igx-date-range-picker>

アクセサー

collapsed

  • get collapsed(): boolean

displayDensity

doneButtonText

  • get doneButtonText(): string
  • set doneButtonText(value: string): void

maxValue

  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void

minValue

  • get minValue(): string | Date
  • set minValue(value: string | Date): void

resourceStrings

type

value

メソッド

close

  • close(): void

ngDoCheck

  • ngDoCheck(): void

open

select

  • select(startDate: Date, endDate?: Date): void

  • 日付の範囲を選択します。endDate が渡されていない場合、範囲は 1 日 (startDate のみ) です。

    @例:
    public selectFiveDayRange() {
 const today = new Date();
 const inFiveDays = new Date(new Date().setDate(today.getDate() + 5));
 this.dateRange.select(today, inFiveDays);
}

    パラメーター

    • startDate: Date
    • オプション endDate: Date

    返却 void

toggle