Ignite UI for Angular

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

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

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

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 です。

@例
let monthViewsDisplayed = this.datePicker.displayMonthsCount;
@例
let monthViewsDisplayed = this.datePicker.displayMonthsCount;

element

element: ElementRef<HTMLElement>

formatViews

formatViews: IFormattingViews

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

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

formatter

formatter: function

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

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

Type declaration

    • (val: Date): string

    • パラメーター

      • val: Date

      返却 string

headerOrientation

headerOrientation: PickerHeaderOrientation = ...

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

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

hideOutsideDays

hideOutsideDays: boolean

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

@備考

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

@例
let hideOutsideDays = this.datePicker.hideOutsideDays;
@例
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>

locale

locale: string

値の書式設定およびカレンダーまたはタイム スピナーに使用されるロケール設定。

@備考

デフォルトでは、Angular の LOCALE_ID を使用します。入力マスクと表示形式が設定されていない場合、両方に影響します。 locale が設定されている場合は、registerLocaleData を介して登録する必要があります。 https://angular.io/guide/i18n#i18n-pipes を参照してください。 登録されていない場合、フォーマットには Intl が使用されます。

@例
<igx-date-picker locale="jp"></igx-date-picker>

mode

mode: PickerInteractionMode = ...

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

@備考

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

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

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

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

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

@備考

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

週番号の表示/非表示

@例

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

spinDelta

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

スピン アクションで各エディターの日付部分を増分または減分するために使用されるデルタ値。 すべての値はデフォルトで 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> = ...

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

@備考

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

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

weekStart

weekStart: number = ...

週の開始日を取得または設定します。

@例
<igx-date-picker [weekStart]="4" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

アクセサー

collapsed

  • get collapsed(): boolean

disabledDates

displayDensity

maxValue

  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void

minValue

  • get minValue(): string | Date
  • set minValue(value: string | Date): void

specialDates

type

value

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

メソッド

clear

  • clear(): void

close

  • close(): void

decrement

  • decrement(datePart?: DatePart, delta?: number): void

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

    @例
    this.datePicker.decrement(DatePart.Date);

    パラメーター

    • オプション datePart: DatePart

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

    • オプション delta: number

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

    返却 void

increment

  • increment(datePart?: DatePart, delta?: number): void

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

    @例
    this.datePicker.increment(DatePart.Date);

    パラメーター

    • オプション datePart: DatePart

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

    • オプション delta: number

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

    返却 void

ngDoCheck

  • ngDoCheck(): void

open

select

  • select(value: Date): void

selectToday

  • selectToday(): void

toggle