Common interface for Components with show and collapse functionality

Constructors

Section titled "Constructors"

IgxTimePickerComponent

new IgxTimePickerComponent(): IgxTimePickerComponent

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:612

Returns IgxTimePickerComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

Inherited from: PickerBaseDirective

Emitted after the calendar has closed.

 
closed: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:278

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

Section titled "closing"

Inherited from: PickerBaseDirective

Emitted when the calendar has started closing, cancelable.

 
closing: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:267

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

disabled

Section titled "disabled"

Inherited from: PickerBaseDirective

Enables or disables the picker.

 
disabled: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>

element

Section titled "element"

Inherited from: PickerBaseDirective 

element: ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31

formatter

Section titled "formatter"

Gets/Sets a custom formatter function on the selected or passed date.

 
formatter: object

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:247

Example

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

headerOrientation

Section titled "headerOrientation"

Inherited from: PickerBaseDirective

Gets/Sets the orientation of the IgxDatePickerComponent header.

 
headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideHeader

Section titled "hideHeader"

Inherited from: PickerBaseDirective

Gets/Sets whether the header is hidden in dialog mode.

 
hideHeader: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122

Example

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>

id

Section titled "id"

Sets the value of the id attribute.

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

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:107

mode

Section titled "mode"

Gets/Sets the interaction mode - dialog or drop down.

 
mode: PickerInteractionMode = PickerInteractionMode.DropDown

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:159

Example

<igx-time-picker mode="dialog"></igx-time-picker>

opened

Section titled "opened"

Inherited from: PickerBaseDirective

Emitted after the calendar has opened.

 
opened: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:256

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

Section titled "opening"

Inherited from: PickerBaseDirective

Emitted when the calendar has started opening, cancelable.

 
opening: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:245

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

outlet

Section titled "outlet"

Inherited from: PickerBaseDirective

The container used for the pop-up element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:204

Example

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

overlaySettings

Section titled "overlaySettings"

Inherited from: PickerBaseDirective

Overlay settings used to display the pop-up element.

 
overlaySettings: OverlaySettings

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133

Example

<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>

placeholder

Section titled "placeholder"

Inherited from: PickerBaseDirective

Sets the placeholder of the picker's input.

 
placeholder: string = ''

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86

Example

<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>

selected

Section titled "selected"

Emitted after a selection has been done.

 
selected: EventEmitter<Date>

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:262

Example

<igx-time-picker (selected)="onSelection($event)"></igx-time-picker>

spinLoop

Section titled "spinLoop"

Sets whether the seconds, minutes and hour spinning will loop back around when end value is reached. By default it's set to true.

<igx-time-picker [spinLoop]="false"></igx-time-picker>
spinLoop: boolean = true

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:236

tabIndex

Section titled "tabIndex"

Inherited from: PickerBaseDirective

Gets/Sets the default template editor's tabindex.

 
tabIndex: string | number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:234

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>

validationFailed

Section titled "validationFailed"

Emitted when the user types/spins invalid time in the time-picker editor.

 
validationFailed: EventEmitter<IgxTimePickerValidationFailedEventArgs>

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:287

Example

<igx-time-picker (validationFailed)="onValidationFailed($event)"></igx-time-picker>

valueChange

Section titled "valueChange"

Emitted when the picker's value changes.

 
valueChange: EventEmitter<string | Date>

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:276

Remarks

Used for two-way bindings.

Example

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

cancelButtonLabel

Section titled "cancelButtonLabel" 
cancelButtonLabel: string

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:581, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:588

displayFormat

Section titled "displayFormat" 
displayFormat: string

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:122, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:126

inputFormat

Section titled "inputFormat" 
inputFormat: string

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:142, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:146

itemsDelta

Section titled "itemsDelta" 
itemsDelta: Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:604, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:608

locale

Section titled "locale"

Inherited from: PickerBaseDirective 

locale: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165

maxValue

Section titled "maxValue" 
maxValue: string | Date

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:212, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:224

minValue

Section titled "minValue" 
minValue: string | Date

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:173, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:185

okButtonLabel

Section titled "okButtonLabel" 
okButtonLabel: string

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:558, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:565

resourceStrings

Section titled "resourceStrings" 
resourceStrings: ITimePickerResourceStrings

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:536, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:543

type

Section titled "type"

Inherited from: PickerBaseDirective 

type: IgxInputGroupType

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:218, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:221

value

Section titled "value" 
value: string | Date

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:499, projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:512

weekStart

Section titled "weekStart"

Inherited from: PickerBaseDirective 

weekStart: number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176, projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets if the dropdown/dialog is collapsed

let isCollapsed = this.timePicker.collapsed;
get collapsed(): boolean

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:196

Returns boolean

Methods

Section titled "Methods"

clear

Section titled "clear"

Clears the time picker value if it is a string or resets the time to 00:00:00 if the value is a Date object.

clear(): void

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:814

Returns void

Example

this.timePicker.clear();

close

Section titled "close"

Closes the dropdown/dialog.

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

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:794

Returns void

decrement

Section titled "decrement"

Decrement a specified DatePart

decrement(datePart: DatePart, delta: number): void

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:874

Parameters

  • datePart: DatePart

    The optional DatePart to decrement. Defaults to Hour.
  • delta: number

    The optional delta to decrement by. Overrides itemsDelta.

Returns void

Example

this.timePicker.decrement(DatePart.Seconds);

increment

Section titled "increment"

Increment a specified DatePart.

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

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:860

Parameters

  • datePart: DatePart

    The optional DatePart to increment. Defaults to Hour.
  • delta: number

    The optional delta to increment by. Overrides itemsDelta.

Returns void

Example

this.timePicker.increment(DatePart.Hours);

open

Section titled "open"

Opens the picker's dialog UI.

open(settings: OverlaySettings): void

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:766

Parameters

  • 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 type="button" igxButton (click)="picker.open()">Open Dialog</button>

Returns void

select

Section titled "select"

Selects time from the igxTimePicker.

select(date: string | Date): void

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:846

Parameters

  • date: string | Date

Returns void

Example

this.timePicker.select(date);

@param date Date object containing the time to be selected.

toggle

Section titled "toggle" 
toggle(settings: OverlaySettings): void

Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:798

Parameters

Returns void