Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

クラス IgxTimePickerComponent

階層

  • IgxTimePickerComponent

実装

  • IgxTimePickerBase
  • ControlValueAccessor
  • EditorProvider
  • OnInit
  • OnDestroy
  • AfterViewInit

プロパティ

アクセサー

メソッド

Object literals

プロパティ

disabled

disabled: boolean = false

igx-time-picker コンポーネントの無効化を許可する @Input プロパティ。デフォルトで disabled が false に設定されます。

<igx-time-picker [disabled]="'true'" [vertical]="true" format="h:mm tt" ></igx-time-picker>

id

id: string = `igx-time-picker-${NEXT_ID++}`

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

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

isSpinLoop

isSpinLoop: boolean = true

スピン動作を決定する @Input プロパティ。デフォルトで isSpinLoop が true に設定されます。 時と分のスピンはデフォルトで折り返します。

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

maxValue

maxValue: string

ユーザー入力を制限するために maxValue の設定を許可する @Input プロパティ。

public max: string = "18:00";
 //..
<igx-time-picker format="HH:mm" [vertical]="true" [maxValue]="max"></igx-time-picker>

minValue

minValue: string

ユーザー入力を制限するために minValue の設定を許可する @Input プロパティ。

public min: string = "09:00";
 //..
<igx-time-picker format="HH:mm" [vertical]="true" [minValue]="min"></igx-time-picker>

mode

mode: InteractionMode = InteractionMode.Dialog

ダイアログ ピッカーとドロップダウンを編集可能なマスクされた入力のインタラクションの切り替えを許可する @Input プロパティ。 デフォルトはダイアログ ピッカーです。

public mode = InteractionMode.DROPDOWN;
 //..
<igx-time-picker [mode]="mode"></igx-time-picker>
次のメンバー:

IgxTimePickerComponent

onClosed

onClosed: EventEmitter<IgxTimePickerComponent> = new EventEmitter<IgxTimePickerComponent>()

timePicker が閉じたときに発生します。

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs> = new EventEmitter<CancelableBrowserEventArgs>()

timePicker が閉じているときに発生します。

onOpened

onOpened: EventEmitter<IgxTimePickerComponent> = new EventEmitter<IgxTimePickerComponent>()

timePicker が開いたときに発生します。

onValidationFailed

onValidationFailed: EventEmitter<IgxTimePickerValidationFailedEventArgs> = new EventEmitter<IgxTimePickerValidationFailedEventArgs>()

無効な値が設定されているときに発生します。{timePicker: any, currentValue: Date, setThroughUI: boolean} を返します。

public min: string = "09:00";
public max: string = "18:00";
@ViewChild("toast")
private toast: IgxToastComponent;
public onValidationFailed(timepicker){
   this.toast.show();
}
//...
<igx-time-picker [minValue]="min" [maxValue]="max" (onValidationFailed)="onValidationFailed($event)"></igx-time-picker>
<igx-toast #toast message="Value must be between 09:00 and 18:00!"></igx-toast>

onValueChanged

onValueChanged: EventEmitter<IgxTimePickerValueChangedEventArgs> = new EventEmitter<IgxTimePickerValueChangedEventArgs>()

選択が実行されたときに発生します。イベントは選択済みの値を含みます。{oldValue: Date, newValue: Date} を返します。

@ViewChild("toast")
private toast: IgxToastComponent;
public onValueChanged(timepicker){
   this.toast.show()
}
//...
<igx-time-picker (onValueChanged)="onValueChanged($event)"></igx-time-picker>
<igx-toast #toast message="The value has been changed!"></igx-toast>

outlet

outlet: IgxOverlayOutletDirective | ElementRef

Popup 要素を結び付けるコンテナを決定します。

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
//..
<igx-time-picker [outlet]="outlet"></igx-time-picker>
//..

Outlet は IgxOverlayOutletDirective または ElementRef のインスタンスです。

promptChar

promptChar: string = "-"

ユーザーに入力を促す文字を設定します。 デフォルト値は "'-'" です。

<igx-time-picker [promptChar] = "'_'">
次のメンバー:

IgxTimePickerComponent

vertical

vertical: boolean = false

igxTimePicker の方向を取得または設定する @Input プロパティ。デフォルトで、vertical は false に設定されます。

<igx-time-picker [vertical]="true" id="time-picker"></igx-time-picker>

アクセサー

cancelButtonLabel

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

  • キャンセル ボタンのラベルを返すアクセサー。

    返却 string

  • カスタム テキストを使用して [キャンセル] ボタンを描画する @Input プロパティ。 デフォルトで cancelButtonLabel が Cancel に設定されます。

    <igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>

    パラメーター

    • value: string

    返却 void

context

  • get context(): object

displayTime

  • get displayTime(): string

  • format オプションを使用して文字列として書式設定される現在の時間を返します。 時間が設定されない場合、空の文字列を返します。

    @ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
   let time = this.picker.displayTime;
}

    返却 string

format

  • get format(): string
  • set format(formatValue: string): void

  • igxTimePicker がフォーカスを持っていないときの時間書式を取得または設定する @Input プロパティ。
    デフォルトの format は hh:mm tt です。
    時間フラグのリスト。
    h: 先行するゼロがない 12 時間形式の時フィールド。
    hh: 先行するゼロがある 12 時間形式の時フィールド。
    H: 先行するゼロがない 24 時間形式の時フィールド。
    HH: 先行するゼロがある 24 時間形式の時フィールド。
    m: 先行するゼロがない分フィールド。
    mm: 先行するゼロがある分フィールド。
    tt: AM/PM フィールドを表す 2 文字の文字列。

    <igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>

    返却 string

  • igxTimePicker がフォーカスを持っていないときの時間書式を取得または設定する @Input プロパティ。
    デフォルトの format は hh:mm tt です。
    時間フラグのリスト。
    h: 先行するゼロがない 12 時間形式の時フィールド。
    hh: 先行するゼロがある 12 時間形式の時フィールド。
    H: 先行するゼロがない 24 時間形式の時フィールド。
    HH: 先行するゼロがある 24 時間形式の時フィールド。
    m: 先行するゼロがない分フィールド。
    mm: 先行するゼロがある分フィールド。
    tt: AM/PM フィールドを表す 2 文字の文字列。

    <igx-time-picker format="HH:m" id="time-picker"></igx-time-picker>

    パラメーター

    • formatValue: string

    返却 void

okButtonLabel

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

  • OK ボタンのラベルを返すアクセサー。

    返却 string

  • カスタム テキストを使用して [OK] ボタンを描画する @Input プロパティ。デフォルトで okButtonLabel が OK に設定されます。

    <igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>

    パラメーター

    • value: string

    返却 void

onClose

onOpen

overlaySettings

  • オーバーレイの位置、インタラクション、およびスクロール動作を変更できる @Input プロパティ。

    const settings: OverlaySettings = {
     closeOnOutsideClick: true,
     modal: false
 }
    <igx-time-picker [overlaySettings]="settings"></igx-time-picker>

    返却 OverlaySettings

  • オーバーレイの位置、インタラクション、およびスクロール動作を変更できる @Input プロパティ。

    const settings: OverlaySettings = {
     closeOnOutsideClick: true,
     modal: false
 }
    <igx-time-picker [overlaySettings]="settings"></igx-time-picker>
    次のメンバー:

    IgxTimePickerComponent

    パラメーター

    返却 void

resourceStrings

template

  • get template(): TemplateRef<any>

value

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

  • igx-time-picker コンポーネントの値を返すアクセサー。

    @ViewChild("MyPick")
public pick: IgxTimePickerComponent;
ngAfterViewInit(){
   let pickSelect = this.pick.value;
}

    返却 Date

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

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

    パラメーター

    • value: Date

    返却 void

メソッド

ampmInView

  • ampmInView(): string[]

  • 現在表示されている AM/PM の配列を返します。

    @ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
   let ApInView = this.picker.ampmInView;
}

    返却 string[]

cancelButtonClick

  • cancelButtonClick(): void

  • 現在の値を選択せずにダイアログを閉じます。

    <igx-dialog class="igx-time-picker__dialog-popup" [leftButtonLabel]="cancelButtonLabel" (onLeftButtonSelect)="cancelButtonClick()">
//...
</igx-dialog>

    返却 void

close

  • close(): void

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

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

    返却 void

hoursInView

  • hoursInView(): string[]

  • 現在表示されている時間の配列を返します。

    @ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
   let hInView = this.picker.hoursInView;
}

    返却 string[]

minutesInView

  • minutesInView(): string[]

  • 現在表示されている分の配列を返します。

    @ViewChild("MyChild")
private picker: IgxTimePickerComponent;
ngAfterViewInit(){
   let minInView = this.picker.minutesInView;
}

    返却 string[]

okButtonClick

  • okButtonClick(): boolean

  • 現在の値が有効な場合、その値を選択し、ダイアログを閉じて true を返します。それ以外の場合は false を返します。

    <igx-dialog class="igx-time-picker__dialog-popup" [rightButtonLabel]="okButtonLabel" (onRightButtonSelect)="okButtonClick()">
//..
</igx-dialog>

    返却 boolean

openDialog

  • openDialog(target?: HTMLElement): void

  • ダイアログを開きます。

    パラメーター

    • オプション target: HTMLElement

      HTMLElement - 次に従ってドロップダウンコンテナを配置するために使用するターゲット要素。

      <igx-time-picker [value]="date" mode="dropdown" #retemplated>
  <ng-template igxTimePickerTemplate let-openDialog="openDialog"
               let-displayTime="displayTime">
    <igx-input-group>
      <input #dropDownTarget igxInput [value]="displayTime" />
      <igx-suffix (click)="openDialog(dropDownTarget)">
        <igx-icon>alarm</igx-icon>
      </igx-suffix>
    </igx-input-group>
  </ng-template>
</igx-time-picker>

    返却 void

scrollAmPmIntoView

  • scrollAmPmIntoView(item: string): void

  • 午前午後の項目を表示可能領域にスクロールします。

    scrAmPmIntoView(picker) {
picker.scrollAmPmIntoView('PM');
}
    <igx-time-picker #picker format="h:mm tt" (onOpen)="scrAmPmIntoView(picker)"></igx-time-picker>

    パラメーター

    • item: string

      ビューにスクロールするため。

    返却 void

scrollHourIntoView

  • scrollHourIntoView(item: string): void

  • 時項目を表示可能領域にスクロールします。

    scrhintoView(picker) {
picker.scrollHourIntoView('2');
}
    <igx-time-picker #picker format="h:mm tt" (onOpen)="scrhintoView(picker)"></igx-time-picker>

    パラメーター

    • item: string

      ビューにスクロールするため。

    返却 void

scrollMinuteIntoView

  • scrollMinuteIntoView(item: string): void

  • 分項目を表示可能領域にスクロールします。

    scrMintoView(picker) {
picker.scrollMinuteIntoView('3');
}
    <igx-time-picker #picker format="h:mm tt" (onOpen)="scrMintoView(picker)"></igx-time-picker>

    パラメーター

    • item: string

      ビューにスクロールするため。

    返却 void

Object literals

itemsDelta

itemsDelta: object

An @Input property that gets/sets the delta by which hour and minute items would be changed
when the user presses the Up/Down keys. By default itemsDelta is set to {hours: 1, minutes:1}

<igx-time-picker [itemsDelta]="{hours:3, minutes:5}" id="time-picker"></igx-time-picker>

hours

hours: number = 1

minutes

minutes: number = 1