File

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

Index

Properties
Methods
Inputs

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.

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
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 ""