### File

`packages/components/eui-timepicker/eui-timepicker.component.ts`

### Description

A timepicker component that allows the user to select a time. The component can be used in two modes: one input field or three separate input fields for hours, minutes, and seconds. The component also supports incremental and decremental buttons for each input field.

### Implements

`ControlValueAccessor` `OnInit` `OnChanges` `DoCheck` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `provideNgxMask()`
selector | `eui-timepicker`
imports | `FormsModule` `ReactiveFormsModule` `NgxMaskDirective` `EUI_INPUT_NUMBER` `EUI_INPUT_TEXT` `EUI_ICON`
styleUrls | `./eui-timepicker.scss`
templateUrl | `./eui-timepicker.component.html`

### Index

###### Properties

- hours
- Public hoursDownDisabled
- Public hoursUpDisabled
- isDatetimepicker
- mins
- Public minutesDownDisabled
- Public minutesUpDisabled
- oneInputFormControl
- oneInputHours
- oneInputMins
- oneInputSecs
- Public secondsDownDisabled
- Public secondsUpDisabled
- secs

###### Methods

- changeHours
- changeMinutes
- changeSeconds
- Public hoursDownDisable
- Public hoursUpDisable
- Public minutesDownDisable
- Public minutesUpDisable
- onFocusOut
- registerOnChange
- registerOnTouched
- Public secondsDownDisable
- Public secondsUpDisable
- setDisabledState
- updateHours
- updateMinutes
- updateSeconds
- writeValue

###### Inputs

- e2eAttr
- hasSeconds
- iconSize
- inputId
- isDisabled
- isOneInputField
- isreadOnly
- placeholder
- stepHours
- stepMinutes
- stepSeconds
- timeMask

### Constructor

`constructor()`

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-timepicker'`

hasSeconds
Type : `boolean`
Default value : `false`
Option for enabling seconds.

iconSize
Type : `string`
Default value : `'l'`
The size of the icon used for changing hours, minutes and seconds.

inputId
Type : `string`
Default value : ``eui-timepicker-${uniqueId()}``
The id of the input element when isOneInputField attribute is used. If not provided, a unique id will be generated.

isDisabled
Type : `boolean`
Default value : `false`
Sets the disabled attribute for the buttons.

isOneInputField
Type : `boolean`
Default value : `false`
Attribute that transforms the 3 separate inputs into one input field.

isreadOnly
Type : `boolean`
Default value : `false`
Sets the readonly attribute of the input field.

placeholder
Type : `string`
Default value : `this.timeMask`
The placeholder of the input field when isOneInputField attribute is used.

stepHours
Type : `number`
Default value : `1`
The step used for changing hours.

stepMinutes
Type : `number`
Default value : `1`
The step used for changing minutes.

stepSeconds
Type : `number`
Default value : `1`
The step used for changing seconds.

timeMask
Type : `string`
Default value : `'Hh:m0'`
The mask for the input field when isOneInputField attribute is used.

### Methods

changeHours
`changeHours(step: number)`

Increments or decrements hours according to the step param being passed

Parameters :

Name | Type | Optional | Description
step | `number` | No | The step number that hours will increase or decrease

Returns : `void`

changeMinutes
`changeMinutes(step: number)`

Increments or decrements minutes according to the step param being passed

Parameters :

Name | Type | Optional | Description
step | `number` | No | The step number that minutes will increase or decrease

Returns : `void`

changeSeconds
`changeSeconds(step: number)`

Increments or decrements seconds according to the step param being passed

Parameters :

Name | Type | Optional | Description
step | `number` | No | The step number that seconds will increase or decrease

Returns : `void`

Public hoursDownDisable
`hoursDownDisable(state: boolean)`

Disables the hour down decremental when min time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

Public hoursUpDisable
`hoursUpDisable(state: boolean)`

Disables the hour up incremental when max time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

Public minutesDownDisable
`minutesDownDisable(state: boolean)`

Disables the minutes down decremental when min time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

Public minutesUpDisable
`minutesUpDisable(state: boolean)`

Disables the minutes up incremental when max time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

onFocusOut
`onFocusOut()`
Autofills mins and secs with 00s if the user tabs after entering hours and marks the input as touched Returns : `void`

registerOnChange
`registerOnChange(fn: () => void)`

Parameters :

Name | Type | Optional
fn | `function` | No

Returns : `void`

registerOnTouched
`registerOnTouched(fn: () => void)`

Parameters :

Name | Type | Optional
fn | `function` | No

Returns : `void`

Public secondsDownDisable
`secondsDownDisable(state: boolean)`

Disables the seconds down decremental when min time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

Public secondsUpDisable
`secondsUpDisable(state: boolean)`

Disables the seconds up incremental when max time range is reached

Parameters :

Name | Type | Optional | Description
state | `boolean` | No | The boolean value that enables the feature

Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`

Parameters :

Name | Type | Optional
isDisabled | `boolean` | No

Returns : `void`

updateHours
`updateHours(newVal: string)`

Updates the input field when hours change and adds 24hour validation + propagates the value back to the form

Parameters :

Name | Type | Optional | Description
newVal | `string` | No | The new value that hours will have

Returns : `void`

updateMinutes
`updateMinutes(newVal: string)`

Updates the input field when minutes change and adds 60mins validation + propagates the value back to the form

Parameters :

Name | Type | Optional | Description
newVal | `string` | No | The new value that minutes will have

Returns : `void`

updateSeconds
`updateSeconds(newVal: string)`

Updates the input field when seconds change and adds 60secs validation + propagates the value back to the form

Parameters :

Name | Type | Optional | Description
newVal | `string` | No | The new value that seconds will have

Returns : `void`

writeValue
`writeValue(values: EuiTimePicker)`

Parameters :

Name | Type | Optional
values | `EuiTimePicker` | No

Returns : `void`

### Properties

hours
Type : `number`

Public hoursDownDisabled
Default value : `false`

Public hoursUpDisabled
Default value : `false`

isDatetimepicker
Type : `boolean`

mins
Type : `number`

Public minutesDownDisabled
Default value : `false`

Public minutesUpDisabled
Default value : `false`

oneInputFormControl
Default value : `new FormControl()`

oneInputHours
Type : `string`

oneInputMins
Type : `string`

oneInputSecs
Type : `string`

Public secondsDownDisabled
Default value : `false`

Public secondsUpDisabled
Default value : `false`

secs
Type : `number`

# results matching ""

# No results matching ""