packages/eui/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.
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. |
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
|
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 |
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
|