Ignite UI for Angular

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

クラス IgxTimePickerComponent

階層

  • PickerBaseDirective
    • IgxTimePickerComponent

実装

  • IgxTimePickerBase
  • ControlValueAccessor
  • OnInit
  • OnDestroy
  • AfterViewInit
  • Validator

Index

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

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

編集可能な入力がフォーカスされていない場合に使用される形式。設定されていない場合、デフォルトは inputFormat です。

@備考:

Angular の DatePipe を使用します。

@例:
<igx-time-picker displayFormat="mm:ss"></igx-time-picker>

element

element: ElementRef<any>

formatter

formatter: function

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

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

Type declaration

    • (val: Date): string

    • パラメーター

      • val: Date

      返却 string

headerOrientation

headerOrientation: PickerHeaderOrientation = ...

ピッカーのヘッダーの向きを設定します。

@備考:

dialog モードでのみ使用できます。デフォルト値は horizontal です。

<igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>

id

id: string = ...

id 属性の値を設定する @Input プロパティ。

<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>

inputFormat

inputFormat: string = ...

予想されるユーザー入力形式とプレースホルダー。

@備考:

デフォルトは hh:mm tt です。

@例:
<igx-time-picker inputFormat="HH:mm"></igx-time-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 = ...

操作モード (dialog または drop down) を取得/設定します。

@例:
<igx-time-picker mode="dialog"></igx-time-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>

ポップアップ要素に使用されるコンテナ。

@例:
<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>

selected

selected: EventEmitter<Date> = ...

選択が行われた後に発行されます。

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

spinLoop

spinLoop: boolean = true

スピン動作を決定する @Input プロパティ。デフォルトで spinLoop が true に設定されます。 時、分、秒が最小値または最大値に達したときにデフォルトで折り返します。

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

tabIndex

tabIndex: string | number

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

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

validationFailed

validationFailed: EventEmitter<IgxTimePickerValidationFailedEventArgs> = ...

ユーザーがタイム ピッカー エディターで無効な時間を入力/スピンしたときに発行されます。

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

valueChange

valueChange: EventEmitter<string | Date> = ...

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

@備考:

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

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

アクセサー

cancelButtonLabel

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

collapsed

  • get collapsed(): boolean

displayDensity

itemsDelta

  • get itemsDelta(): Pick<DatePartDeltas, "hours" | "minutes" | "seconds">
  • set itemsDelta(value: Pick<DatePartDeltas, "hours" | "minutes" | "seconds">): void

  • スピン アクションで各エディターの日付部分を増減し、 ドロップダウン/ダイアログに時間部分を表示するために使用されるデルタ値。 デフォルトで itemsDelta は {hour: 1, minute: 1, second: 1} に設定されます。

    <igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>

    返却 Pick<DatePartDeltas, "hours" | "minutes" | "seconds">

  • スピン アクションで各エディターの日付部分を増減し、 ドロップダウン/ダイアログに時間部分を表示するために使用されるデルタ値。 デフォルトで itemsDelta は {hour: 1, minute: 1, second: 1} に設定されます。

    <igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>

    パラメーター

    返却 void

maxValue

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

minValue

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

okButtonLabel

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

resourceStrings

type

value

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

メソッド

clear

  • clear(): void

close

  • close(): void

  • ドロップ ダウンを閉じます。

    <igx-time-picker #timePicker></igx-time-picker>

    @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
picker.close();

    返却 void

decrement

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

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

    @例:
    this.timePicker.decrement(DatePart.Seconds);

    パラメーター

    • オプション datePart: DatePart

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

    • オプション delta: number

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

    返却 void

increment

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

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

    @例:
    this.timePicker.increment(DatePart.Hours);

    パラメーター

    • オプション datePart: DatePart

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

    • オプション delta: number

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

    返却 void

ngDoCheck

  • ngDoCheck(): void

open

  • ピッカーのダイアログ UI を開きます。

    パラメーター

    • オプション settings: OverlaySettings

      OverlaySettings - ドロップダウンまたはダイアログ コンテナを適切に配置するために使用するオーバーレイ設定。

      <igx-time-picker #picker [value]="date"></igx-time-picker>
<button (click)="picker.open()">Open Dialog</button>

    返却 void

select

  • select(date: string | Date): void

toggle