クラス IgxDateTimeEditorDirective

Date Time Editor は、日付と時刻を入力、編集、および書式設定する機能を提供します。

@igxmodule

IgxDateTimeEditorModule

@igxparent

IgxInputGroup

@igxtheme

igx-input-theme

@igxkeywords

date, time, editor

@igxgroup

Scheduling

@備考:

Ignite UI Date Time Editor ディレクティブにより、開発者は日付/時刻のユーザー入力を簡単に操作できます。 プレースホルダーとして input 要素に表示される、指定またはデフォルトの入力形式での入力が必要です。 必要に応じて、日付のみ (例: 'dd/MM/yyyy’)、時刻のみ (例: 'HH:mm tt’)、または両方を同時に入力できます。 入力形式と異なる表示形式をサポートします。 特定または対象の DatePart を増分および減分するメソッドを提供します。

@例:
<igx-input-group>
  <input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [displayFormat]="'shortDate'" [(ngModel)]="date"/>
</igx-input-group>

階層

実装

  • OnInit
  • AfterViewChecked
  • ControlValueAccessor
  • OnChanges
  • DoCheck
  • Validator
  • ControlValueAccessor

コンストラクタ

constructor

  • new IgxDateTimeEditorDirective(renderer: Renderer2, elementRef: ElementRef, maskParser: MaskParsingService, _document: any, _locale: any): IgxDateTimeEditorDirective

プロパティ

displayFormat

displayFormat: string

shortDatelongDate など定義済みの書式オプションと、 DatePipe でサポートされている文字を使用して作成された書式文字列の両方を設定します (EE/MM/yyyy など)。

@例:
<input igxDateTimeEditor [displayFormat]="'shortDate'">

displayValuePipe

displayValuePipe: PipeTransform

ぼかしに使用される pipe を指定します。

<input [displayValuePipe] = "displayFormatPipe">

focusedValuePipe

focusedValuePipe: PipeTransform

フォーカスに使用される pipe を指定します。

<input [focusedValuePipe] = "inputFormatPipe">

includeLiterals

includeLiterals: boolean

バインドされた値が書式設定記号を含むかどうかを指定します。

<input [includeLiterals] = "true">

isSpinLoop

isSpinLoop: boolean = true

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

@例:
<input igxDateTimeEditor [isSpinLoop]="false">

locale

locale: string

値の書式に使用されるロケール設定。

@備考:

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

@例:
<input igxDateTimeEditor [locale]="'en'">

mask

mask: string

入力マスクを設定します。

<input [igxMask] = "'00/00/0000'">

onValueChange

onValueChange: EventEmitter<IMaskEventArgs> = new EventEmitter<IMaskEventArgs>()

値が変更されたときにイベントを発生します。 イベント引数として rawValue: string および formattedValue: string を提供します。

<input (onValueChange) = "onValueChange(rawValue: string, formattedValue: string)">

promptChar

promptChar: string = "_"

入力マスクで入力可能な文字を表すキャラクターを設定します。 デフォルト値は "'_'" です。

<input [promptChar] = "'/'">

validationFailed

validationFailed: EventEmitter<IgxDateTimeEditorEventArgs> = new EventEmitter<IgxDateTimeEditorEventArgs>()

エディターが指定された範囲内にない場合、またはエディターの値が無効な状態の場合に生成されます。

@例:
<input igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" (validationFailed)="onValidationFailed($event)"/>

valueChange

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

エディターの値が変更されたときに発生します。

@例:
<input igxDateTimeEditor (valueChange)="onValueChanged($event)"/>

アクセサー

inputFormat

  • get inputFormat(): string
  • set inputFormat(value: string): void

maxValue

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

minValue

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

placeholder

  • get placeholder(): string
  • set placeholder(val: string): void

value

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

メソッド

clear

  • clear(): void

decrement

increment

parseDate

  • parseDate(val: string): Date | null