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

コンストラクター

プロパティ

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>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
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 です。

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

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

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

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

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

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

Type declaration

    • (val): string
    • パラメーター

      • val: Date

      返却 string

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

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

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

備考

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

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

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

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

<igx-date-picker [showWeekNumbers]="true"></igx-date-picker>
``
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> = ...

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

備考

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

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

アクセサー

プロパティ

  • 指定した DatePart を減少します。

    this.datePicker.decrement(DatePart.Date);
    

    パラメーター

    • Optional datePart: DatePart

      減少するオプションの DatePart です。デフォルト値は Date です。

    • Optional delta: number

      減少に使用するオプションのデルタ。spinDelta をオーバーライドします。

    返却 void

  • 表示密度の値に基づいて --component-size CSS 変数を設定します。

    返却 "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

  • 指定した DatePart を増加します。

    this.datePicker.increment(DatePart.Date);
    

    パラメーター

    • Optional datePart: DatePart

      増分するオプションの DatePart です。デフォルト値は Date です。

    • Optional delta: number

      増分するデルタ (オプション)。spinDelta をオーバーライドします。

    返却 void