クラス 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>

階層

  • IgxDatePickerComponent

実装

  • IDatePicker
  • ControlValueAccessor
  • EditorProvider
  • OnInit
  • AfterViewInit
  • OnDestroy
  • AfterViewChecked

コンストラクタ

constructor

プロパティ

cancelButtonLabel

cancelButtonLabel: string

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

@例:
<igx-date-picker cancelButtonLabel="Close" todayButtonLabel="Today"></igx-date-picker>

disabled

disabled: boolean

IgxDatePickerComponent を有効/無効にします。

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

editorTabIndex

editorTabIndex: number

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

@例:
<igx-date-picker editorTabIndex="1"></igx-date-picker>

element

element: ElementRef

formatter

formatter: function

選択した日付または渡した日付にカスタム書式関数を設定または取得します。

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

Type declaration

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

      • val: Date

      返却 string

hideOutsideDays

hideOutsideDays: boolean

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

@備考:

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

@例:
let hideOutsideDays = this.datePicker.hideOutsideDays;
@例:
let hideOutsideDays = this.datePicker.hideOutsideDays;

id

id: string = `igx-date-picker-${NEXT_ID++}`

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

@備考:

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

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

isSpinLoop

isSpinLoop: boolean = true

Min/max を達した場合に、日付が継続してスピンまたは停止するかどうかを取得または設定します。

@例:
<igx-date-picker [isSpinLoop]="false"></igx-date-picker>

label

label: string = "Date"

IgxDatePickerComponent ラベルを設定または取得します。

@備考:

デフォルト ラベルは 'Date' です。

@例:
<igx-date-picker [label]="Calendar"></igx-date-picker>

labelVisibility

labelVisibility: boolean = true

IgxDatePickerComponent ラベルの表示状態を設定または取得します。

@備考:

デフォルトで表示状態は true に設定されます。

@例:

<igx-date-picker [labelVisibility]="false">

locale

locale: "en"

ロケールを取得または設定します。

@備考:

デフォルト ロケールは en です。

@例:
<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>

mask

mask: string

編集可能なドロップダウン モードで IgxDatePickerComponent の日付マスクを設定します。

@例:
let mask = this.datePicker.mask;

mode

mode: InteractionMode = InteractionMode.Dialog

操作モード (ダイアログまたはドロップダウン) を取得または設定します。

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

monthsViewNumber

monthsViewNumber: number = 1

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

@備考:

デフォルト値は 1 です。

@例:
let monthViewsDisplayed = this.datePicker.monthsViewNumber;
@例:
let monthViewsDisplayed = this.datePicker.monthsViewNumber;

onClosed

onClosed: EventEmitter<IgxDatePickerComponent> = new EventEmitter<IgxDatePickerComponent>()

IgxDatePickerComponent が閉じたときに発生されます。

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

IgxDatePickerComponent が閉じたときに発生されます。

onDisabledDate

onDisabledDate: EventEmitter<IDatePickerDisabledDateEventArgs> = new EventEmitter<IDatePickerDisabledDateEventArgs>()

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

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

onOpened

onOpened: EventEmitter<IgxDatePickerComponent> = new EventEmitter<IgxDatePickerComponent>()

IgxDatePickerComponent カレンダーが開いたときに発生されます。

onSelection

onSelection: EventEmitter<Date> = new EventEmitter<Date>()

カレンダーで選択が実行されるときに発生されます。

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

onValidationFailed

onValidationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = new EventEmitter<IDatePickerValidationFailedEventArgs>()

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

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

outlet

outlet: IgxOverlayOutletDirective | ElementRef

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

@備考:

OutletIgxOverlayOutletDirective または ElementRef のインスタンスです。

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

todayButtonLabel

todayButtonLabel: string

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

@例:
<igx-date-picker cancelButtonLabel="cancel" todayButtonLabel="Tomorrow"></igx-date-picker>

valueChange

valueChange: EventEmitter<Date> = new EventEmitter<Date>()

Date Picker の値が変更されたときに発生されます。

@例:
<igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>

vertical

vertical: boolean = false

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

@例:
<igx-date-picker [vertical]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

weekStart

weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY

週の最初の曜日を設定または取得します。

@例:
<igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

アクセサー

context

  • get context(): object

disabledDates

displayData

  • get displayData(): string

dropDownOverlaySettings

format

  • get format(): string
  • set format(format: string): void

formatOptions

formatViews

modalOverlaySettings

specialDates

template

  • get template(): TemplateRef<any>

value

  • get value(): Date
  • set value(date: Date): void

メソッド

_updateValidityOnBlur

  • _updateValidityOnBlur(): void

deselectDate

  • deselectDate(): void

ngAfterViewChecked

  • ngAfterViewChecked(): void

openDialog

  • openDialog(): void

selectDate

  • selectDate(date: Date): void
  • カレンダー選択の変更します。

    @備考:

    このメソッドの呼び出しは @calendar.onSelection イベントを発生し、@handleSelection メソッドを発生します。

    @例:
    this.datePicker.selectDate(this.date);

    パラメーター

    • date: Date

      カレンダー に設定する必要な渡した日付。

    返却 void

triggerTodaySelection

  • triggerTodaySelection(): void