クラス IgxTimePickerComponent

階層

  • IgxTimePickerComponent

実装

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

コンストラクタ

constructor

プロパティ

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 & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

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>
//..

OutletIgxOverlayOutletDirective または 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

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: 先行するゼロがある分フィールド。
    s: 先行するゼロがない秒フィールド。
    ss: 先行するゼロがある秒フィールド。
    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: 先行するゼロがある分フィールド。
    s: 先行するゼロがない秒フィールド。
    ss: 先行するゼロがある秒フィールド。
    tt: AM/PM フィールドを表す 2 文字の文字列。

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

    パラメーター

    • formatValue: string

    返却 void

itemsDelta

  • get itemsDelta(): object
  • set itemsDelta(value: object): void
  • ユーザーが上下の矢印キーを押したときに時および分の項目が表示されるデルタを取得または設定する @Input プロパティ。 デフォルトで itemsDelta{hours: 1, minutes: 1, seconds: 1} に設定されます。

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

    返却 object

    • hours: number
    • minutes: number
    • seconds: number
  • ユーザーが上下の矢印キーを押したときに時および分の項目が表示されるデルタを取得または設定する @Input プロパティ。 デフォルトで itemsDelta{hours: 1, minutes: 1, seconds: 1} に設定されます。

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

    パラメーター

    • value: object
      • hours: number
      • minutes: number
      • seconds: number

    返却 void

okButtonLabel

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

overlaySettings

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

    const settings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: false
     }

    <igx-time-picker [overlaySettings]="settings"></igx-time-picker>
    @次のメンバー:

    IgxTimePickerComponent

    返却 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

メソッド

ampmInView

  • ampmInView(): string[]

cancelButtonClick

  • cancelButtonClick(): void

close

  • close(): void

hoursInView

  • hoursInView(): string[]

minutesInView

  • minutesInView(): string[]

mouseDown

  • mouseDown(event: MouseEvent): void

ngAfterViewChecked

  • ngAfterViewChecked(): void

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" (onOpened)="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" (onOpened)="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" (onOpened)="scrMintoView(picker)"></igx-time-picker>

    パラメーター

    • item: string

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

    返却 void

scrollSecondsIntoView

  • scrollSecondsIntoView(item: string): void
  • 秒項目を表示領域にスクロールします。

    scrMintoView(picker) {
    picker.scrollSecondsIntoView('4');
    }
    <igx-time-picker #picker format="h:mm tt" (onOpened)="scrMintoView(picker)"></igx-time-picker>

    パラメーター

    • item: string

      ビューにスクロールします。

    返却 void

secondsInView

  • secondsInView(): string[]