### 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.

### Basic Usage

Example :

    <!-- Single input field mode -->
    <eui-timepicker
      [isOneInputField]="true"
      [(ngModel)]="selectedTime" />

    <!-- Separate fields mode -->
    <eui-timepicker
      [showSeconds]="true"
      [(ngModel)]="selectedTime" />

    <!-- With reactive forms -->
    <form [formGroup]="form">
      <eui-timepicker formControlName="appointmentTime" />
    </form>

Example :

    selectedTime: EuiTimePicker = { hours: 14, minutes: 30, seconds: 0 };
    form = new FormGroup({
      appointmentTime: new FormControl(null)
    });

### Accessibility

- Provide clear labels for time input purpose
- Use aria-label on increment/decrement buttons
- Ensure keyboard navigation works (Tab, Arrow keys)
- Announce time changes to screen readers

### Notes

- Time format: { hours: number, minutes: number, seconds?: number }
- Single input mode uses mask for formatted input (HH:MM or HH:MM:SS)
- Separate fields mode provides individual controls with +/- buttons
- Step values control increment/decrement amounts

### 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 state.

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
Type : `unknown`
Default value : `false`

Public hoursUpDisabled
Type : `unknown`
Default value : `false`

isDatetimepicker
Type : `boolean`

mins
Type : `number`

Public minutesDownDisabled
Type : `unknown`
Default value : `false`

Public minutesUpDisabled
Type : `unknown`
Default value : `false`

oneInputFormControl
Type : `unknown`
Default value : `new FormControl()`

oneInputHours
Type : `string`

oneInputMins
Type : `string`

oneInputSecs
Type : `string`

Public secondsDownDisabled
Type : `unknown`
Default value : `false`

Public secondsUpDisabled
Type : `unknown`
Default value : `false`

secs
Type : `number`

# results matching ""

# No results matching ""