Class IgxTimePickerComponent

Common interface for Components with show and collapse functionality

Hierarchy

Hierarchy (View Summary)

PickerBaseDirective
- IgxTimePickerComponent

Implements

IgxTimePickerBase
ControlValueAccessor
OnInit
OnDestroy
AfterViewInit
Validator

Constructors

constructor

new IgxTimePickerComponent(): IgxTimePickerComponent
Overrides PickerBaseDirective.constructor
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:596
Returns IgxTimePickerComponent

Properties

closed

closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has closed.

Example

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

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started closing, cancelable.

Example

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

disabled

disabled: boolean = false

Enables or disables the picker.

Example

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

displayFormat

displayFormat: string

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

Remarks

Uses Angular's DatePipe.

Example

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

element

element: ElementRef<any> = ...

formatter

formatter: (val: Date) => string

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

Example

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

Type declaration

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Gets/Sets the orientation of the IgxDatePickerComponent header.

Example

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

hideHeader

hideHeader: boolean = false

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

Example

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

id

id: string = ...

Sets the value of the id attribute.

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

inputFormat

inputFormat: string

The expected user input format and placeholder.

Remarks

Default is hh:mm tt

Example

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

mode

mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

Example

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

opened

opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has opened.

Example

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

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started opening, cancelable.

Example

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

outlet

outlet: IgxOverlayOutletDirective | ElementRef<any>

The container used for the pop-up element.

Example

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

overlaySettings

overlaySettings: OverlaySettings

Overlay settings used to display the pop-up element.

Example

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

placeholder

placeholder: string = ''

Sets the placeholder of the picker's input.

Example

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

selected

selected: EventEmitter<Date> = ...

Emitted after a selection has been done.

Example

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

spinLoop

spinLoop: boolean = true

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>

tabIndex

tabIndex: string | number

Gets/Sets the default template editor's tabindex.

Example

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

validationFailed

validationFailed: EventEmitter<IgxTimePickerValidationFailedEventArgs> = ...

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

Example

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

valueChange

valueChange: EventEmitter<string | Date> = ...

Emitted when the picker's value changes.

Remarks

Used for two-way bindings.

Example

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

Accessors

cancelButtonLabel

get cancelButtonLabel(): string
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:572
An accessor that returns the label of cancel button.

Returns string
set cancelButtonLabel(value: string): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:565
Overrides the default text of the Cancel button.
Remarks
Defaults to the value from resource strings, "Cancel" for the built-in EN.
```
<igx-time-picker cancelButtonLabel='Exit' [value]="date" format="h:mm tt"></igx-time-picker>
```
Parameters
- value: string
Returns void

collapsed

get collapsed(): boolean
Overrides PickerBaseDirective.collapsed
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:184
Gets if the dropdown/dialog is collapsed
```
let isCollapsed = this.timePicker.collapsed;
```
Returns boolean

itemsDelta

get itemsDelta(): Pick<
    DatePartDeltas,
    "hours"
    | "minutes"
    | "seconds"
    | "fractionalSeconds",
>
Implementation of IgxTimePickerBase.itemsDelta
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:592
Returns Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">
set itemsDelta(
    value: Pick<
        DatePartDeltas,
        "hours"
        | "minutes"
        | "seconds"
        | "fractionalSeconds",
    >,
): void
Implementation of IgxTimePickerBase.itemsDelta
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:588
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>
```
Parameters
- value: Pick<DatePartDeltas, "hours" | "minutes" | "seconds" | "fractionalSeconds">
Returns void

locale

get locale(): string
Implementation of IgxTimePickerBase.locale
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:129
Gets the locale of the date-picker. If not set, defaults to applciation's locale..

Returns string
set locale(value: string): void
Implementation of IgxTimePickerBase.locale
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:137
Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

Parameters
- value: string
Returns void

maxValue

get maxValue(): string | Date
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:212
Returns string | Date
set maxValue(value: string | Date): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:200
The maximum value the picker will accept.
Remarks
If a string value is passed in, it must be in ISO format.
Example
```
<igx-time-picker [maxValue]="20:30:00"></igx-time-picker>
```
Parameters
- value: string | Date
Returns void

minValue

get minValue(): string | Date
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:173
Returns string | Date
set minValue(value: string | Date): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:161
The minimum value the picker will accept.
Remarks
If a string value is passed in, it must be in ISO format.
Example
```
<igx-time-picker [minValue]="18:00:00"></igx-time-picker>
```
Parameters
- value: string | Date
Returns void

okButtonLabel

get okButtonLabel(): string
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:549
An accessor that returns the label of ok button.

Returns string
set okButtonLabel(value: string): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:542
Overrides the default text of the OK button.
Remarks
Defaults to the value from resource strings, "OK" for the built-in EN.
```
<igx-time-picker okButtonLabel='SET' [value]="date" format="h:mm tt"></igx-time-picker>
```
Parameters
- value: string
Returns void

resourceStrings

get resourceStrings(): ITimePickerResourceStrings
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:527
An accessor that returns the resource strings.

Returns ITimePickerResourceStrings
set resourceStrings(value: ITimePickerResourceStrings): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:520
An accessor that sets the resource strings. By default it uses EN resources.

Parameters
- value: ITimePickerResourceStrings
Returns void

type

get type(): IgxInputGroupType
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:194
Returns IgxInputGroupType
set type(val: IgxInputGroupType): void
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:191
Determines how the picker's input will be styled.
Remarks
Default is box.
Example
```
<igx-date-picker [type]="'line'"></igx-date-picker>
```
Parameters
- val: IgxInputGroupType
Returns void

value

get value(): string | Date
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:483
The currently selected value / time from the drop-down/dialog
Remarks
The current value is of type Date
Example
```
const newValue: Date = new Date(2000, 2, 2, 10, 15, 15);
this.timePicker.value = newValue;
```
Returns string | Date
set value(value: string | Date): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:496
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: string | Date
Returns void

weekStart

get weekStart(): number
Inherited from PickerBaseDirective.weekStart
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:153
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.

Returns number
set weekStart(value: number): void
Inherited from PickerBaseDirective.weekStart
- Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:161
Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

Parameters
- value: number
Returns void

Methods

clear

clear(): void
Overrides PickerBaseDirective.clear
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:794
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.
Example
```
this.timePicker.clear();
```
Returns void

close

close(): void
Implementation of IgxTimePickerBase.close
Overrides PickerBaseDirective.close
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:774
Closes the dropdown/dialog.
```
<igx-time-picker #timePicker></igx-time-picker>
```
```
@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
picker.close();
```
Returns void

decrement

decrement(datePart?: DatePart, delta?: number): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:854
Decrement a specified DatePart
Example
```
this.timePicker.decrement(DatePart.Seconds);
```
Parameters
- datePart: DatePart
  The optional DatePart to decrement. Defaults to Hour.
- delta: number
  The optional delta to decrement by. Overrides itemsDelta.
Returns void

increment

increment(datePart?: DatePart, delta?: number): void
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:840
Increment a specified DatePart.
Example
```
this.timePicker.increment(DatePart.Hours);
```
Parameters
- datePart: DatePart
  The optional DatePart to increment. Defaults to Hour.
- delta: number
  The optional delta to increment by. Overrides itemsDelta.
Returns void

open

open(settings?: OverlaySettings): void
Overrides PickerBaseDirective.open
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:750
Opens the picker's dialog UI.

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

select(date: string | Date): void
Overrides PickerBaseDirective.select
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:826
Selects time from the igxTimePicker.
Example
```
this.timePicker.select(date);

@param date Date object containing the time to be selected
```
Parameters
- date: string | Date
Returns void

toggle

toggle(settings?: OverlaySettings): void
Overrides PickerBaseDirective.toggle
- Defined in projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts:778
Parameters
- settings: OverlaySettings
Returns void

Class IgxTimePickerComponent

Hierarchy

Hierarchy (View Summary)

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns IgxTimePickerComponent

Properties

closed

Example

closing

Example

disabled

Example

displayFormat

Remarks

Example

element

formatter

Example

Type declaration

headerOrientation

Example

hideHeader

Example

id

inputFormat

Remarks

Example

mode

Example

opened

Example

opening

Example

outlet

Example

overlaySettings

Example

placeholder

Example

selected

Example

spinLoop

tabIndex

Example

validationFailed

Example

valueChange

Remarks

Example

Accessors

cancelButtonLabel

Returns string

Remarks

Parameters

value: string

Returns void

collapsed

Returns boolean

itemsDelta

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

Parameters

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

Returns void

locale

Returns string

Parameters

value: string

Returns void

maxValue

Returns string | Date

Remarks

Example

Parameters

value: string | Date