Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス IgxDatePickerComponent

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

Igx Module

IgxDatePickerModule

Igx Theme

igx-calendar-theme, igx-icon-theme

Igx Group

スケージュール

Igx Keywords

datepicker, calendar, schedule, date

Example

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

階層

Hierarchy

  • PickerBaseDirective
    • IgxDatePickerComponent

実装

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

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

calendarFormat

calendarFormat: IFormattingOptions

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

Example

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

cancelButtonLabel

cancelButtonLabel: string

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

Example

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

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

displayMonthsCount

displayMonthsCount: number = 1

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

Remarks

デフォルト値は 1 です。

Example

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

Example

let monthViewsDisplayed = this.datePicker.displayMonthsCount;

element

element: ElementRef<any>

formatViews

formatViews: IFormattingViews

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

Example

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

formatter

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

Type declaration

    • (val: Date): string

    • Gets/Sets a custom formatter function on the selected or passed date.

      Example

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

      パラメーター

      • val: Date

      返却 string

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

Example

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

hideOutsideDays

hideOutsideDays: boolean

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

Remarks

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

Example

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

Example

let hideOutsideDays = this.datePicker.hideOutsideDays;

id

id: string = ...

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

Remarks

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

Example

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

inputFormat

inputFormat: string

エディターの定型入力。

Remarks

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

Example

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

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

overlaySettings

overlaySettings: OverlaySettings

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

Example

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

placeholder

placeholder: string = ''

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

Example

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

resourceStrings

resourceStrings: IDatePickerResourceStrings

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

showWeekNumbers

showWeekNumbers: boolean

週番号の表示/非表示

Example

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

spinDelta

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

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

Example

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

spinLoop

spinLoop: boolean = true

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

Example

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

tabIndex

tabIndex: string | number

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

Example

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

todayButtonLabel

todayButtonLabel: string

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

Example

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

validationFailed

validationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = ...

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

Example

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

valueChange

valueChange: EventEmitter<Date> = ...

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

Remarks

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

Example

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

アクセサー

collapsed

disabledDates

displayDensity

locale

maxValue

minValue

size

specialDates

type

value

weekStart

メソッド

clear

close

  • ピッカーのドロップダウンまたはダイアログを閉じます。

    Example

    <igx-date-picker #picker></igx-date-picker>

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

    返却 void

decrement

  • 指定した DatePart をデクリメントします。

    Example

    this.datePicker.decrement(DatePart.Date);

    パラメーター

    • オプション datePart: DatePart

      指定した DatePart をデクリメントします。

    • オプション delta: number

      指定した DatePart をデクリメントします。

    返却 void

getComponentSizeStyles

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

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

increment

  • 指定した DatePart をインクリメントします。

    Example

    this.datePicker.increment(DatePart.Date);

    パラメーター

    • オプション datePart: DatePart

      指定した DatePart をインクリメントします。

    • オプション delta: number

      指定した DatePart をインクリメントします。

    返却 void

open

select

selectToday

toggle