Ignite UI for Angular

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

Class IgxDateTimeEditorDirective

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

IgxDateTimeEditorModule

IgxInputGroup

igx-input-theme

date, time, editor

スケジュール

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

注: このディレクティブは内部的に Mask Directive を使用し、入力要素に type="text" が必要です。type="date" またはその他の日付/時刻タイプの入力要素は、マスク機能に必要なプログラムによるカーソル配置とテキスト選択を許可しないため、サポートされていません。

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

階層

Hierarchy (View Summary)

実装

  • OnChanges
  • OnInit
  • Validator
  • ControlValueAccessor

コンストラクター

プロパティ

アクセサー

メソッド

コンストラクター

プロパティ

defaultFormatType: "time" | "date" | "dateTime" = 'date'

デフォルトの入力形式を指定します。デフォルト値は date で、編集可能な日付部分のみが含まれます。他に有効なオプションは time および dateTime です。

<input igxDateTimeEditor [defaultFormatType]="'dateTime'">
displayValuePipe: PipeTransform

Pipe に使用されるパイプを指定します。

<input [displayValuePipe] = "displayFormatPipe">
focusedValuePipe: PipeTransform

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

<input [focusedValuePipe] = "inputFormatPipe">
includeLiterals: boolean

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

<input [includeLiterals] = "true">
locale: string

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

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

<input igxDateTimeEditor [locale]="'en'">
promptChar: string = '_'

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

<input [promptChar] = "'/'">
spinDelta: DatePartDeltas

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

<input igxDateTimeEditor [spinDelta]="{date: 5, minute: 30}">
spinLoop: boolean = true

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

<input igxDateTimeEditor [spinLoop]="false">
validationFailed: EventEmitter<IgxDateTimeEditorEventArgs> = ...

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

<input igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" (validationFailed)="onValidationFailed($event)"/>
valueChange: EventEmitter<string | Date> = ...

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

<input igxDateTimeEditor (valueChange)="valueChange($event)"/>
valueChanged: EventEmitter<IMaskEventArgs> = ...

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

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

アクセサー

メソッド