クラス IgxDateRangePickerComponent

カレンダー 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

スケージュール

Remarks

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

Example

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

階層

Hierarchy

PickerBaseDirective
- IgxDateRangePickerComponent

実装

OnChanges
OnInit
AfterViewInit
OnDestroy
ControlValueAccessor
Validator

コンストラクタ

constructor

new IgxDateRangePickerComponent(element: ElementRef<any>, _localeId: string, platform: PlatformUtil, _injector: Injector, _cdr: ChangeDetectorRef, _overlayService: IgxOverlayService, _displayDensityOptions?: IDisplayDensityOptions, _inputGroupType?: IgxInputGroupType): IgxDateRangePickerComponent
オーバーライド PickerBaseDirective.constructor
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:439
パラメーター
- element: ElementRef<any>
- _localeId: string
- platform: PlatformUtil
- _injector: Injector
- _cdr: ChangeDetectorRef
- _overlayService: IgxOverlayService
- オプション _displayDensityOptions: IDisplayDensityOptions
- オプション _inputGroupType: IgxInputGroupType
返却 IgxDateRangePickerComponent

プロパティ

closed

closed: EventEmitter<IBaseEventArgs> = ...

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

Example

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

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

Example

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

densityChanged

densityChanged: EventEmitter<IDensityChangedEventArgs> = ...

disabled

disabled: boolean = false

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

Example

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

displayFormat

displayFormat: string

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

Remarks

Angular の DatePipe を使用します。

Example

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

displayMonthsCount

displayMonthsCount: number = 2

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

Remarks

デフォルトは2 です。

Example

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

element

element: ElementRef<any>

formatter

formatter: ((val: DateRange) => string)

Type declaration

(val: DateRange): string

A custom formatter function, applied on the selected or passed in date.

Example

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>

パラメーター

val: DateRange

返却 string

hideOutsideDays

hideOutsideDays: boolean

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

Remarks

デフォルト値は false です。

Example

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

inputFormat

inputFormat: string

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

Remarks

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

Example

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

label

label: IgxLabelDirective

mode

mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

Remarks

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

Example

<igx-date-picker mode="dialog"></igx-date-picker>

opened

opened: EventEmitter<IBaseEventArgs> = ...

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

Example

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

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

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

Example

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

outlet

outlet: ElementRef<any> | IgxOverlayOutletDirective

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

Remarks

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

Example

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

overlaySettings

overlaySettings: OverlaySettings

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

Example

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

pickerActions

pickerActions: IgxPickerActionsDirective

placeholder

placeholder: string = ''

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

Example

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

showWeekNumbers

showWeekNumbers: boolean = false

週番号の表示/非表示

Remarks

デフォルト値は false です。

Example

<igx-date-range-picker [showWeekNumbers]="true"></igx-date-range-picker>
``

tabIndex

tabIndex: string | number

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

Example

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

valueChange

valueChange: EventEmitter<DateRange> = ...

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

Example

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

アクセサー

collapsed

get collapsed(): boolean
オーバーライド PickerBaseDirective.collapsed
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:352
カレンダーの状態を取得します。
```
let state = this.dateRange.collapsed;
```
返却 boolean

displayDensity

get displayDensity(): DisplayDensity
継承元 PickerBaseDirective.displayDensity
- 次で定義 projects/igniteui-angular/src/lib/core/density.ts:53
コンポーネントのテーマを返します。デフォルトのテーマは comfortable です。利用可能なオプションは comfortable、cosy、または compact です。
```
let componentTheme = this.component.displayDensity;
```
返却 DisplayDensity
set displayDensity(val: DisplayDensity): void
継承元 PickerBaseDirective.displayDensity
- 次で定義 projects/igniteui-angular/src/lib/core/density.ts:62
コンポーネントのテーマを設定します。

パラメーター
- val: DisplayDensity
返却 void

doneButtonText

get doneButtonText(): string
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:150
返却 string
set doneButtonText(value: string): void
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:145
カレンダーダイアログの done ボタンのデフォルトテキスト。

Remarks
デフォルト値は Done です。

Input
カスタムテキストで [完了] ボタンを描画する @Input プロパティ。デフォルトで、doneButtonText は Done に設定されます。ボタンは dialog モードでのみ表示されます。

Example
```
<igx-date-range-picker doneButtonText="完了"></igx-date-range-picker>
```
パラメーター
- value: string
返却 void

locale

get locale(): string
継承元 PickerBaseDirective.locale
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:115
date-picker の locale を取得します。設定されていない場合、デフォルトでアプリケーションのロケールになります。

返却 string
set locale(value: string): void
継承元 PickerBaseDirective.locale
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:124
date-picker の locale を設定します。有効な BCP 47 言語タグに設定します。

パラメーター
- value: string
返却 void

maxValue

get maxValue(): string | Date
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:224
返却 string | Date
set maxValue(value: string | Date): void
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:218
有効な範囲の最大値。

Example
```
<igx-date-range-picker [maxValue]="maxDate"></igx-date-range-picker>
```
パラメーター
- value: string | Date
返却 void

minValue

get minValue(): string | Date
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:208
返却 string | Date
set minValue(value: string | Date): void
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:202
有効な範囲の最小値。

Example
```
<igx-date-range-picker [minValue]="minDate"></igx-date-range-picker>
```
パラメーター
- value: string | Date
返却 void

resourceStrings

get resourceStrings(): IDateRangePickerResourceStrings
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:240
リソース文字列を返すアクセサー。

返却 IDateRangePickerResourceStrings
set resourceStrings(value: IDateRangePickerResourceStrings): void
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:232
リソース文字列を設定するアクセサー。デフォルトで EN リソースを使用します。

パラメーター
- value: IDateRangePickerResourceStrings
返却 void

type

get type(): IgxInputGroupType
継承元 PickerBaseDirective.type
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:181
返却 IgxInputGroupType
set type(val: IgxInputGroupType): void
継承元 PickerBaseDirective.type
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:177
ピッカーの入力のスタイル設定を決定します。

Remarks
デフォルトは box です。

Example
```
<igx-date-picker [type]="'line'"></igx-date-picker>
```
パラメーター
- val: IgxInputGroupType
返却 void

value

get value(): DateRange
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:368
カレンダーから現在選択されている値 / 範囲。

Remarks
現在の値のタイプは DateRange です。

Example
```
const newValue: DateRange = { start: new Date("2/2/2012"), end: new Date("3/3/2013")};
this.dateRangePicker.value = newValue;
```
返却 DateRange
set value(value: DateRange): void
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:372
パラメーター
- value: DateRange
返却 void

weekStart

get weekStart(): number
継承元 PickerBaseDirective.weekStart
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:139
週の最初の曜日を取得します。曜日の数値または列挙型の表現を返します。設定されていない場合、デフォルトでアプリケーションロケールの週の初日になります。

返却 number
set weekStart(value: number): void
継承元 PickerBaseDirective.weekStart
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:148
週の最初の曜日を設定します。数値または WEEKDAYS の列挙型の値に割り当てます。

パラメーター
- value: number
返却 void

メソッド

close

close(): void
オーバーライド PickerBaseDirective.close
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:505
Date Range Picker のドロップダウンまたはダイアログを閉じます。

Example
```
<igx-date-range-picker #dateRange></igx-date-range-picker>

<button (click)="dateRange.close()">Close Dialog</button>
```
返却 void

open

open(overlaySettings?: OverlaySettings): void
オーバーライド PickerBaseDirective.open
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:479
Date Range Picker のドロップダウンまたはダイアログを開きます。

Example
```
<igx-date-range-picker #dateRange></igx-date-range-picker>

<button (click)="dateRange.open()">Open Dialog</button
```
パラメーター
- オプション overlaySettings: OverlaySettings
返却 void

select

select(startDate: Date, endDate?: Date): void
オーバーライド PickerBaseDirective.select
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:541
日付の範囲を選択します。endDate が渡されていない場合、範囲は 1 日 (startDate のみ) です。

Example
```
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

toggle(overlaySettings?: OverlaySettings): void
オーバーライド PickerBaseDirective.toggle
- 次で定義 projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts:521
Date Range Picker のドロップダウンまたはダイアログを切り替えます。

Example
```
<igx-date-range-picker #dateRange></igx-date-range-picker>

<button (click)="dateRange.toggle()">Toggle Dialog</button>
```
パラメーター
- オプション overlaySettings: OverlaySettings
返却 void

クラス IgxDateRangePickerComponent

Igx Module

Igx Theme

Igx Keywords

Igx Group

Remarks

Example

階層

Hierarchy

実装

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

パラメーター

element: ElementRef<any>

_localeId: string

platform: PlatformUtil

_injector: Injector

_cdr: ChangeDetectorRef

_overlayService: IgxOverlayService

オプション _displayDensityOptions: IDisplayDensityOptions

オプション _inputGroupType: IgxInputGroupType

返却 IgxDateRangePickerComponent

プロパティ

closed

Example

closing

Example

densityChanged

disabled

Example

displayFormat

Remarks

Example

displayMonthsCount

Remarks

Example

element

formatter

Type declaration

Example

パラメーター

val: DateRange

返却 string

hideOutsideDays

Remarks

Example

inputFormat

Remarks

Example

label

mode

Remarks

Example

opened

Example

opening

Example

outlet

Remarks

Example

overlaySettings

Example

pickerActions

placeholder

Example

showWeekNumbers

Remarks

Example

tabIndex

Example

valueChange

Example

アクセサー

collapsed

返却 boolean

displayDensity