クラス IgxTimePickerComponent

階層

  • PickerBaseDirective
    • IgxTimePickerComponent

実装

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

Index

コンストラクタ

プロパティ

closed: EventEmitter<IBaseEventArgs> = ...

カレンダーが閉じた後に発生します。

例:
<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

キャンセル可能なカレンダーの終了時に発生します。

例:
<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
disabled: boolean = false

ピッカーを有効または無効にします。

例:
<igx-date-picker [disabled]="'true'"></igx-date-picker>
displayFormat: string

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

備考:

Angular の DatePipe を使用します。

例:
<igx-time-picker displayFormat="mm:ss"></igx-time-picker>
element: ElementRef<any>
formatter: (val: Date) => string

Type declaration

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

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

      パラメーター

      • val: Date

      返却 string

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

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

備考:

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

<igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>
id: string = ...

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

<igx-time-picker [id]="'igx-time-picker-5'" [displayFormat]="h:mm tt" ></igx-time-picker>
inputFormat: string = DateTimeUtil.DEFAULT_TIME_INPUT_FORMAT

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

備考:

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

例:
<igx-time-picker inputFormat="HH:mm"></igx-time-picker>
locale: string

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

備考:

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

例:
<igx-date-picker locale="jp"></igx-date-picker>
mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

例:
<igx-time-picker mode="dialog"></igx-time-picker>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
opened: EventEmitter<IBaseEventArgs> = ...

カレンダーが開いた後に発生します。

例:
<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

キャンセル可能なカレンダーの開始時に発生します。

例:
<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
outlet: IgxOverlayOutletDirective | ElementRef<any>

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

例:
<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->
overlaySettings: OverlaySettings

ポップアップ要素の表示に使用されるオーバーレイ設定。

例:
<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
placeholder: string = ''

ピッカーの入力の placeholder を設定します。

例:
<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>
selected: EventEmitter<Date> = ...

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

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

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

<igx-time-picker [spinLoop]="false"></igx-time-picker>
tabIndex: string | number

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

例:
<igx-date-picker [tabIndex]="1"></igx-date-picker>
validationFailed: EventEmitter<IgxTimePickerValidationFailedEventArgs> = ...

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

例:
<igx-time-picker (validationFailed)="onValidationFailed($event)"></igx-time-picker>
valueChange: EventEmitter<string | Date> = ...

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

備考:

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

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

アクセサー

  • get cancelButtonLabel(): string
  • set cancelButtonLabel(value: string): void
  • get collapsed(): boolean
  • 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

  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void
  • get minValue(): string | Date
  • set minValue(value: string | Date): void
  • get okButtonLabel(): string
  • set okButtonLabel(value: string): void
  • 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(): void
  • close(): void
  • ドロップ ダウンを閉じます。

    <igx-time-picker #timePicker></igx-time-picker>
    
    @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
    picker.close();

    返却 void

  • decrement(datePart?: DatePart, delta?: number): void
  • increment(datePart?: DatePart, delta?: number): void
  • ngDoCheck(): void
  • ピッカーのダイアログ 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(date: string | Date): void