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:648

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

Optional 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:283

Example

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

headerOrientation

Section titled "headerOrientation"

Inherited from: PickerBaseDirective

Gets/Sets the orientation of the date picker 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:143

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:195

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:298

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:272

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:323

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:312

Remarks

Used for two-way bindings.

Example

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

Accessors

Section titled "Accessors"

cancelButtonLabel

Section titled "cancelButtonLabel"

An accessor that returns the label of cancel button.

 
get cancelButtonLabel(): string

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

Returns string

Overrides the default text of the Cancel button.

 
set cancelButtonLabel(value: string): void

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

Parameters

  • value: string

Returns void

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:232

Returns boolean

displayFormat

Section titled "displayFormat"

The format used to display the picker's value when it's not being edited.

 
get displayFormat(): string

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

Example

<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>

Returns string

The format used when editable input is not focused. Defaults to the inputFormat if not set.

 
set displayFormat(value: string): void

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

Example

<igx-time-picker displayFormat="mm:ss"></igx-time-picker>

Parameters

  • value: string

Returns void

inputFormat

Section titled "inputFormat"

The editor's input mask.

 
get inputFormat(): string

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

Example

<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>

Returns string

The expected user input format and placeholder.

 
set inputFormat(value: string): void

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

Example

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

Parameters

  • value: string

Returns void

itemsDelta

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

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

Returns Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">

Delta values used to increment or decrement each editor date part on spin actions and to display time portions in the dropdown/dialog. By default itemsDelta is set to {hour: 1, minute: 1, second: 1}

<igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>
set itemsDelta(value: Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">): void

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

Parameters

  • value: Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">

Returns void

locale

Section titled "locale"

Inherited from: PickerBaseDirective

Gets the locale of the date-picker. If not set, defaults to applciation's locale..

 
get locale(): string

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

Returns string

Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

 
set locale(value: string): void

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

Parameters

  • value: string

Returns void

maxValue

Section titled "maxValue" 
get maxValue(): string | Date

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

Returns string | Date

The maximum value the picker will accept.

 
set maxValue(value: string | Date): void

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

Example

<igx-time-picker [maxValue]="20:30:00"></igx-time-picker>

Parameters

  • value: string | Date

Returns void

minValue

Section titled "minValue" 
get minValue(): string | Date

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

Returns string | Date

The minimum value the picker will accept.

 
set minValue(value: string | Date): void

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

Example

<igx-time-picker [minValue]="18:00:00"></igx-time-picker>

Parameters

  • value: string | Date

Returns void

okButtonLabel

Section titled "okButtonLabel"

An accessor that returns the label of ok button.

 
get okButtonLabel(): string

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

Returns string

Overrides the default text of the OK button.

 
set okButtonLabel(value: string): void

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

Parameters

  • value: string

Returns void

resourceStrings

Section titled "resourceStrings"

An accessor that returns the resource strings.

 
get resourceStrings(): ITimePickerResourceStrings

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

Returns ITimePickerResourceStrings

An accessor that sets the resource strings. By default it uses EN resources.

 
set resourceStrings(value: ITimePickerResourceStrings): void

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

Parameters

Returns void

type

Section titled "type"

Inherited from: PickerBaseDirective

Determines how the picker's input will be styled.

 
set type(val: IgxInputGroupType): void

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

Example

<igx-date-picker [type]="'line'"></igx-date-picker>

Parameters

Returns void

value

Section titled "value"

The currently selected value / time from the drop-down/dialog

 
get value(): string | Date

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

Example

const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
this.timePicker.value = newValue;

Returns string | 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>
set value(value: string | Date): void

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

Parameters

  • value: string | Date

Returns void

weekStart

Section titled "weekStart"

Inherited from: PickerBaseDirective

Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.

 
get weekStart(): number

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

Returns number

Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

 
set weekStart(value: number): void

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

Parameters

  • value: number

Returns void

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:850

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:830

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:910

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:896

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:802

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:882

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:834

Parameters

Returns void