Class IgxTimePickerComponent

Hierarchy

PickerBaseDirective
- IgxTimePickerComponent

Implements

IgxTimePickerBase
ControlValueAccessor
OnInit
OnDestroy
AfterViewInit
Validator

Constructors

constructor

new IgxTimePickerComponent(element, _localeId, _inputGroupType, _injector, platform, cdr): IgxTimePickerComponent
Overrides PickerBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:609
Parameters
- element: ElementRef<any>
- _localeId: string
- _inputGroupType: IgxInputGroupType
- _injector: Injector
- platform: PlatformUtil
- cdr: ChangeDetectorRef
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

- (val): string
- Parameters
  - val: Date
  Returns string

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Sets the orientation of the picker's header.

Remarks

Available in dialog mode only. Default value is horizontal.

<igx-time-picker [headerOrientation]="'vertical'"></igx-time-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 = DateTimeUtil.DEFAULT_TIME_INPUT_FORMAT

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: ElementRef<any> | IgxOverlayOutletDirective

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/src/lib/time-picker/time-picker.component.ts:585
An accessor that returns the label of cancel button.

Returns string
set cancelButtonLabel(value): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:578
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/src/lib/time-picker/time-picker.component.ts:190
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/src/lib/time-picker/time-picker.component.ts:605
Returns Pick<DatePartDeltas,
    | "hours"
    | "minutes"
    | "seconds"
    | "fractionalSeconds">
set itemsDelta(value): void
Implementation of IgxTimePickerBase.itemsDelta
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:601
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/src/lib/date-common/picker-base.directive.ts:115
Gets the locale of the date-picker. If not set, defaults to applciation's locale..

Returns string
set locale(value): void
Implementation of IgxTimePickerBase.locale
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:123
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/src/lib/time-picker/time-picker.component.ts:218
Returns string | Date
set maxValue(value): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:206
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/src/lib/time-picker/time-picker.component.ts:179
Returns string | Date
set minValue(value): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:167
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/src/lib/time-picker/time-picker.component.ts:562
An accessor that returns the label of ok button.

Returns string
set okButtonLabel(value): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:555
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/src/lib/time-picker/time-picker.component.ts:540
An accessor that returns the resource strings.

Returns ITimePickerResourceStrings
set resourceStrings(value): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:533
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/src/lib/date-common/picker-base.directive.ts:180
Returns IgxInputGroupType
set type(val): void
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:177
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/src/lib/time-picker/time-picker.component.ts:496
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): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:509
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/src/lib/date-common/picker-base.directive.ts:139
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): void
Inherited from PickerBaseDirective.weekStart
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:147
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
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:818
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/src/lib/time-picker/time-picker.component.ts:798
Closes the dropdown/dialog.
```
<igx-time-picker #timePicker></igx-time-picker>
```
```
@ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
picker.close();
```
Returns void

decrement

decrement(datePart?, delta?): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:878
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?, delta?): void
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:864
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?): void
Overrides PickerBaseDirective.open
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:774
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): void
Overrides PickerBaseDirective.select
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:850
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?): void
Overrides PickerBaseDirective.toggle
- Defined in projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts:802
Parameters
- settings: OverlaySettings
Returns void

Class IgxTimePickerComponent

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

element: ElementRef<any>

_localeId: string

_inputGroupType: IgxInputGroupType

_injector: Injector

platform: PlatformUtil

cdr: ChangeDetectorRef

Returns IgxTimePickerComponent

Properties

closed

Example

closing

Example

disabled

Example

displayFormat

Remarks

Example

element

formatter

Example

Type declaration

Parameters

val: Date

Returns string

headerOrientation

Remarks

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

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

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