packages/components/eui-timepicker/eui-timepicker.component.ts
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.
<!-- 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>selectedTime: EuiTimePicker = { hours: 14, minutes: 30, seconds: 0 };
form = new FormGroup({
appointmentTime: new FormControl(null)
});
ControlValueAccessor
OnInit
OnChanges
DoCheck
OnDestroy
| 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 |
Properties |
|
Methods |
Inputs |
constructor()
|
| 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. |
| changeHours | ||||||||
changeHours(step: number)
|
||||||||
|
Increments or decrements hours according to the step param being passed
Parameters :
Returns :
void
|
| changeMinutes | ||||||||
changeMinutes(step: number)
|
||||||||
|
Increments or decrements minutes according to the step param being passed
Parameters :
Returns :
void
|
| changeSeconds | ||||||||
changeSeconds(step: number)
|
||||||||
|
Increments or decrements seconds according to the step param being passed
Parameters :
Returns :
void
|
| Public hoursDownDisable | ||||||||
hoursDownDisable(state: boolean)
|
||||||||
|
Disables the hour down decremental when min time range is reached
Parameters :
Returns :
void
|
| Public hoursUpDisable | ||||||||
hoursUpDisable(state: boolean)
|
||||||||
|
Disables the hour up incremental when max time range is reached
Parameters :
Returns :
void
|
| Public minutesDownDisable | ||||||||
minutesDownDisable(state: boolean)
|
||||||||
|
Disables the minutes down decremental when min time range is reached
Parameters :
Returns :
void
|
| Public minutesUpDisable | ||||||||
minutesUpDisable(state: boolean)
|
||||||||
|
Disables the minutes up incremental when max time range is reached
Parameters :
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 :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
|
Parameters :
Returns :
void
|
| Public secondsDownDisable | ||||||||
secondsDownDisable(state: boolean)
|
||||||||
|
Disables the seconds down decremental when min time range is reached
Parameters :
Returns :
void
|
| Public secondsUpDisable | ||||||||
secondsUpDisable(state: boolean)
|
||||||||
|
Disables the seconds up incremental when max time range is reached
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
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 :
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 :
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 :
Returns :
void
|
| writeValue | ||||||
writeValue(values: EuiTimePicker)
|
||||||
|
Parameters :
Returns :
void
|
| 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
|