Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxTimePickerComponent

Hierarchy

  • IgxTimePickerComponent

Implements

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

Properties

Accessors

Methods

Object literals

Properties

disabled

disabled: boolean = false

An @Input property that allows you to disable the igx-time-picker component. By default disabled is set to false.

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

format

format: string = "hh:mm tt"

An @Input property that Gets/Sets format of time while igxTimePicker does not have focus.
By default format is set to hh:mm tt.
List of time-flags:
h : hours field in 12-hours format without leading zero
hh : hours field in 12-hours format with leading zero
H : hours field in 24-hours format without leading zero
HH : hours field in 24-hours format with leading zero
m : minutes field without leading zero
mm : minutes field with leading zero
tt : 2 character string which represents AM/PM field 

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

id

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

An @Input property that sets the value of the id attribute.

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

isSpinLoop

isSpinLoop: boolean = true

An @Input property that determines the spin behavior. By default isSpinLoop is set to true. The minutes and hour spinning will wrap around by default.

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

maxValue

maxValue: string

An @Input property that allows you to set the maxValue to limit the user input.

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

minValue

minValue: string

An @Input property that allows you to set the minValue to limit the user input.

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

onClose

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

Emitted when a timePicker is being closed.

onOpen

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

Emitted when a timePicker is being opened.

@ViewChild("toast")
private toast: IgxToastComponent;
public onOpen(timepicker){
   this.toast.show();
}
//...
<igx-time-picker [minValue]="min" [maxValue]="max" (onOpen)="onOpen($event)"></igx-time-picker>
<igx-toast #toast message="The time picker has been opened!"></igx-toast>

onValidationFailed

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

Emitted when an invalid value is being set. Returns {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>()

Emitted when selection is made. The event contains the selected value. Returns {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>

vertical

vertical: boolean = false

An @Input property that Gets/Sets the orientation of the igxTimePicker. By default vertical is set to false.

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

Accessors

cancelButtonLabel

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

context

  • get context(): object

displayTime

  • get displayTime(): string

  • Returns the current time formatted as string using the format option. If there is no set time the return is an empty string.

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

    Returns string

okButtonLabel

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

resourceStrings

template

  • get template(): TemplateRef<any>

value

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

  • An accessor that returns the value of igx-time-picker component.

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

    Returns Date

  • An accessor that allows you to set a time using the value input.

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

    Parameters

    • value: Date

    Returns void

Methods

ampmInView

  • ampmInView(): string[]

  • Returns an array of the AM/PM currently in view.

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

    Returns string[]

cancelButtonClick

  • cancelButtonClick(): void

  • Closes the dialog without selecting the current value.

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

    Returns void

hoursInView

  • hoursInView(): string[]

  • Returns an array of the hours currently in view.

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

    Returns string[]

minutesInView

  • minutesInView(): string[]

  • Returns an array of the minutes currently in view.

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

    Returns string[]

ngDoCheck

  • ngDoCheck(): void

okButtonClick

  • okButtonClick(): boolean

  • If current value is valid selects it, closes the dialog and returns true, otherwise returns false.

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

    Returns boolean

openDialog

scrollAmPmIntoView

  • scrollAmPmIntoView(item: string): void

  • Scrolls an ampm item into view.

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

    Parameters

    • item: string

      to be scrolled in view.

    Returns void

scrollHourIntoView

  • scrollHourIntoView(item: string): void

  • Scrolls a hour item into view.

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

    Parameters

    • item: string

      to be scrolled in view.

    Returns void

scrollMinuteIntoView

  • scrollMinuteIntoView(item: string): void

  • Scrolls a minute item into view.

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

    Parameters

    • item: string

      to be scrolled in view.

    Returns 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