Class IgxDatePickerComponent

Date Picker コンポーネントは、日付の単一選択が可能なポップアップカレンダーを表示します。

Igx Module

IgxDatePickerModule

Igx Theme

igx-calendar-theme, igx-icon-theme

Igx Group

スケジュール

Igx Keywords

datepicker, calendar, schedule, date

例

<igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker>

階層

Hierarchy

PickerBaseDirective
- IgxDatePickerComponent

実装

ControlValueAccessor
Validator
OnInit
AfterViewInit
OnDestroy
AfterViewChecked
AfterContentChecked

コンストラクター

constructor

new IgxDatePickerComponent(element, _localeId, _overlayService, _injector, _renderer, platform, cdr, _inputGroupType?): IgxDatePickerComponent
オーバーライド PickerBaseDirective.constructor
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:509
パラメーター
- element: ElementRef<HTMLElement>
- _localeId: string
- _overlayService: IgxOverlayService
- _injector: Injector
- _renderer: Renderer2
- platform: PlatformUtil
- cdr: ChangeDetectorRef
- _inputGroupType: IgxInputGroupType
返却 IgxDatePickerComponent

アクセサー

calendarFormat

calendarFormat: IFormattingOptions

IgxDatePickerComponent の書式オプションを取得または設定します。

例

this.datePicker.calendarFormat = {day: "numeric",  month: "long", weekday: "long", year: "numeric"};

cancelButtonLabel

cancelButtonLabel: string

キャンセルボタンのラベルを取得または設定します。

例

<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker>

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-picker displayFormat="EE/M/yy"></igx-date-picker>

displayMonthsCount

displayMonthsCount: number = 1

表示される月表示の数を取得または設定します。

備考

デフォルト値は 1 です。

例

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

例

let monthViewsDisplayed = this.datePicker.displayMonthsCount;

element

element: ElementRef<any>

formatViews

formatViews: IFormattingViews

IgxDatePickerComponent の書式設定ビューを取得または設定します。

例

let formatViews = this.datePicker.formatViews;
 this.datePicker.formatViews = {day:false, month: false, year:false};

formatter

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

選択または渡された日付のカスタムフォーマッター関数を取得または設定します。

例

<igx-date-picker [value]="date" [formatter]="formatter"></igx-date-picker>

Type declaration

- (val): string
- パラメーター
  - val: Date
  返却 string

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

例

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideOutsideDays

hideOutsideDays: boolean

非アクティブな日付が非表示かどうかを取得または設定します。

備考

現在の月以外の日付に適用します。デフォルト値は false です。

例

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

例

let hideOutsideDays = this.datePicker.hideOutsideDays;

id

id: string = ...

id 属性の値を取得または設定します。

備考

提供されていない場合は、自動的に生成されます。

例

<igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

inputFormat

inputFormat: string

エディターの定型入力。

備考

何も提供されない場合にプレースホルダーとしても使用されます。デフォルト値は "'MM/dd/yyyy'"

例

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

mode

mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

備考

デフォルトのモードは dropdown

例

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

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: ElementRef<any> | IgxOverlayOutletDirective

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

備考

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

例

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

overlaySettings

overlaySettings: OverlaySettings

ポップアップ要素の表示に使用されるオーバーレイ設定です。

例

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

placeholder

placeholder: string = ''

ピッカーの入力の placeholder を設定します。

例

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

resourceStrings

resourceStrings: IDatePickerResourceStrings

ピッカーのデフォルトのトグルアイコンのリソース文字列を取得または設定します。デフォルトで EN リソースを使用します。

showWeekNumbers

showWeekNumbers: boolean

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

例

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

spinDelta

spinDelta: Pick<DatePartDeltas, "month" | "year" | "date">

スピンアクションで各エディターの日付部分を増分または減分するために使用されるデルタ値です。すべての値はデフォルトで 1 です

例

<igx-date-picker [spinDelta]="{ date: 5, month: 2 }"></igx-date-picker>

spinLoop

spinLoop: boolean = true

現在スピンされている日付セグメントをループするかどうかを指定します。

例

<igx-date-picker [spinLoop]="false"></igx-date-picker>

tabIndex

tabIndex: string | number

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

例

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

todayButtonLabel

todayButtonLabel: string

今日ボタンのラベルを取得または設定します。

例

<igx-date-picker todayButtonLabel="Today"></igx-date-picker>

validationFailed

validationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = ...

ユーザーが日付ピッカーエディターで無効な日付を入力またはスピンしたときに発生します。

例

<igx-date-picker (validationFailed)="onValidationFailed($event)"></igx-date-picker>

valueChange

valueChange: EventEmitter<Date> = ...

ピッカーの値が変更されたときに発生されます。

備考

two-way バインディングに使用されます。

例

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

プロパティ

collapsed

get collapsed(): boolean
継承元 PickerBaseDirective.collapsed
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:267
ピッカーのポップアップ状態を取得します。
例
```
const state = this.picker.collapsed;
```
返却 boolean

disabledDates

get disabledDates(): DateRangeDescriptor[]
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:277
無効な日付記述子を取得または設定します。
例
```
let disabledDates = this.datepicker.disabledDates;
this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
```
返却 DateRangeDescriptor[]
set disabledDates(value): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:280
パラメーター
- value: DateRangeDescriptor[]
返却 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): void
継承元 PickerBaseDirective.locale
- 次で定義 projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:123
date-picker のlocale を設定します。有効な BCP 47 言語タグに設定します。

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

maxValue

get maxValue(): string | Date
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:366
返却 string | Date
set maxValue(value): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:361
ピッカーが受け入れる最大値です。
例
```
<igx-date-picker [maxValue]="maxDate"></igx-date-picker>
```
パラメーター
- value: string | Date
返却 void

minValue

get minValue(): string | Date
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:350
返却 string | Date
set minValue(value): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:345
ピッカーが受け入れる最小値です。
例
```
<igx-date-picker [minValue]="minDate"></igx-date-picker>
```
パラメーター
- value: string | Date
返却 void

specialDates

get specialDates(): DateRangeDescriptor[]
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:295
特別な日付記述子を取得または設定します。
例
```
let specialDates = this.datepicker.specialDates;
this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
```
返却 DateRangeDescriptor[]
set specialDates(value): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:298
パラメーター
- value: DateRangeDescriptor[]
返却 void

type

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

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

value

get value(): string | Date
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:325
選択された日付を取得または設定します。
例
```
<igx-date-picker [value]="date"></igx-date-picker>
```
返却 string | Date
set value(date): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:328
パラメーター
- date: string | Date
返却 void

weekStart

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

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

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

メソッド

clear

clear(): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:666
入力フィールドとピッカーの値をクリアします。
例
```
this.datePicker.clear();
```
返却 void

close

close(): void
オーバーライド PickerBaseDirective.close
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:617
ピッカーのドロップダウンまたはダイアログを閉じます。
例
```
<igx-date-picker #picker></igx-date-picker>

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

decrement

decrement(datePart?, delta?): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:697
指定した DatePart を減少します。
例
```
this.datePicker.decrement(DatePart.Date);
```
パラメーター
- datePart: DatePart
  減少するオプションの DatePart です。デフォルト値は Date です。
- delta: number
  減少に使用するオプションのデルタ。spinDelta をオーバーライドします。
返却 void

increment

increment(datePart?, delta?): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:683
指定した DatePart を増加します。
例
```
this.datePicker.increment(DatePart.Date);
```
パラメーター
- datePart: DatePart
  増分するオプションの DatePart です。デフォルト値は Date です。
- delta: number
  増分するデルタ (オプション)。spinDelta をオーバーライドします。
返却 void

open

open(settings?): void
オーバーライド PickerBaseDirective.open
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:568
ピッカーのドロップダウンまたはダイアログを開きます。
例
```
<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.open()">Open Dialog</button>
```
パラメーター
- settings: OverlaySettings
返却 void

select

select(value): void
オーバーライド PickerBaseDirective.select
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:634
日付を選択します。
備考
入力フィールドの値を更新します。

例
```
this.datePicker.select(date);
```
パラメーター
- value: Date
返却 void

selectToday

selectToday(): void
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:648
今日の日付を選択し、ピッカーを閉じます。
例
```
<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.selectToday()">Select Today</button>
```
返却 void

toggle

toggle(settings?): void
オーバーライド PickerBaseDirective.toggle
- 次で定義 projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:599
ピッカーのドロップダウンまたはダイアログを切り替えます。
例
```
<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button>
```
パラメーター
- settings: OverlaySettings
返却 void

Class IgxDatePickerComponent

Igx Module

Igx Theme

Igx Group

Igx Keywords

例

階層

Hierarchy

実装

コンストラクター

アクセサー

プロパティ

メソッド

コンストラクター

constructor

パラメーター

element: ElementRef<HTMLElement>

_localeId: string

_overlayService: IgxOverlayService

_injector: Injector

_renderer: Renderer2

platform: PlatformUtil

cdr: ChangeDetectorRef

_inputGroupType: IgxInputGroupType

返却 IgxDatePickerComponent

アクセサー

calendarFormat

例

cancelButtonLabel

例

closed

例

closing

例

disabled

例

displayFormat

備考

例

displayMonthsCount

備考

例

例

element

formatViews

例

formatter

例

Type declaration

パラメーター

val: Date

返却 string

headerOrientation

例

hideOutsideDays

備考

例

例

id

備考

例

inputFormat

備考

例

mode

備考

例

opened

例

opening

例

outlet

備考

例

overlaySettings

例

placeholder

例

resourceStrings

showWeekNumbers