クラス IgxDatePickerComponent

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

igxmodule

IgxDatePickerModule

igxtheme

igx-calendar-theme, igx-icon-theme

igxgroup

Scheduling

igxkeywords

datepicker, calendar, schedule, date

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

階層

  • PickerBaseDirective
    • IgxDatePickerComponent

実装

  • ControlValueAccessor
  • Validator
  • OnInit
  • AfterViewInit
  • OnDestroy
  • AfterViewChecked

Index

コンストラクタ

プロパティ

calendarFormat: IFormattingOptions

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

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

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

例:
<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker>
closed: EventEmitter<IBaseEventArgs> = ...

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

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

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

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

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

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

編集されていないときにピッカーの値を表示するために使用される書式設定。

備考:

Angular の DatePipe を使用します。

例:
<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>
displayMonthsCount: number = 1

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

備考:

デフォルト値は 1 です。

例:
let monthViewsDisplayed = this.datePicker.displayMonthsCount;
例:
let monthViewsDisplayed = this.datePicker.displayMonthsCount;
element: ElementRef<HTMLElement>
formatViews: IFormattingViews

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

例:
let formatViews = this.datePicker.formatViews;
this.datePicker.formatViews = {day:false, month: false, year:false};
formatter: ((val: Date) => string)

Type declaration

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

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

      パラメーター

      • val: Date

      返却 string

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

例:
<igx-date-picker headerOrientation="vertical"></igx-date-picker>
hideOutsideDays: boolean

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

備考:

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

例:
let hideOutsideDays = this.datePicker.hideOutsideDays;
例:
let hideOutsideDays = this.datePicker.hideOutsideDays;
id: string = ...

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

備考:

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

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

エディターの定型入力。

備考:

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

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

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

備考:

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

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

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

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

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

例:
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
outlet: ElementRef<any> | IgxOverlayOutletDirective

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

備考:

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

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

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

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

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

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

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

showWeekNumbers: boolean

週番号の表示/非表示

例:

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

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

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

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

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

例:
<igx-date-picker [spinLoop]="false"></igx-date-picker>
tabIndex: string | number

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

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

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

例:
<igx-date-picker todayButtonLabel="Today"></igx-date-picker>
validationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = ...

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

例:
<igx-date-picker (validationFailed)="onValidationFailed($event)"></igx-date-picker>
valueChange: EventEmitter<Date> = ...

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

備考:

双方向バインディングに使用されます。

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

アクセサー

  • get collapsed(): boolean
  • get locale(): string
  • set locale(value: string): void
  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void
  • get minValue(): string | Date
  • set minValue(value: string | Date): void
  • get value(): string | Date
  • set value(date: string | Date): void
  • get weekStart(): number
  • set weekStart(value: number): void

メソッド

  • clear(): void
  • close(): void
  • decrement(datePart?: DatePart, delta?: number): void
  • increment(datePart?: DatePart, delta?: number): void
  • ngDoCheck(): void
  • select(value: Date): void
  • selectToday(): void