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: (val: Date) => string

Type declaration

    • (val: Date): string

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

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

      パラメーター

      • val: Date

      返却 string

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

備考:

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 = DateTimeUtil.DEFAULT_TIME_INPUT_FORMAT

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

備考:

デフォルトは 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 = PickerInteractionMode.DropDown

操作モード (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

  • ドロップダウン/ダイアログから現在選択されている値/時間。

    備考:

    現在の値は Date タイプです。

    例:
    const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
    this.timePicker.value = newValue;

    返却 string | Date

  • value 入力を使用して時間を設定するためのアクセサー。

    public date: Date = new Date(Date.now());
     //...
    <igx-time-picker [value]="date" format="h:mm tt"></igx-time-picker>
    備考:

    現在の値は Date タイプです。

    例:
    const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
    this.timePicker.value = newValue;

    パラメーター

    • 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

increment

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

ngDoCheck

  • ngDoCheck(): void

open

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

    パラメーター

    • オプション settings: OverlaySettings

      OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to

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

    返却 void

select

  • select(date: string | Date): void

toggle