eui documentation
  1. Components
  2. EuiTimeRangepickerComponent

File

packages/components/eui-date-range-selector/eui-time-range-picker/eui-time-range-picker.component.ts

Description

Provides a dual time picker interface for selecting start and end times within a time range. Typically used within date range selection workflows where time precision is required. Receives configuration via DYNAMIC_COMPONENT_CONFIG injection token and invokes a callback whenever either time value changes.

Basic Usage (Internal Component)

This component is typically used internally by eui-date-range-selector when isTimeRange is enabled. It's dynamically created and configured via the portal system.

Example :
// Configuration passed to component
const config: EuiTimeRangePickerConfig = {
  hours: 9,
  mins: 0,
  secs: 0,
  endHours: 17,
  endMins: 30,
  endSecs: 0,
  hasSeconds: false,
  stepHours: 1,
  stepMinutes: 15,
  stepSeconds: 1,
  callback: (h, m, s, eh, em, es) => {
    console.log('Time range changed');
  }
};

Accessibility

  • Each time picker has accessible labels for start and end times
  • Keyboard navigation supported through underlying timepicker components
  • Time values announced to screen readers on change
  • Step increments help users select valid time values

Notes

  • Automatically created by eui-date-range-selector when time selection enabled
  • Displays two timepickers side-by-side for start and end times
  • Callback invoked on any time value change
  • Supports hours, minutes, and optional seconds
  • Step values control increment/decrement behavior
  • Labels automatically translated via TranslateService

Implements

OnInit OnDestroy

Metadata

encapsulation ViewEncapsulation.None
selector eui-time-range-picker
imports FormsModule ReactiveFormsModule EUI_TIMEPICKER
templateUrl ./eui-time-range-picker.component.html
styleUrl ./eui-time-range-picker.scss

Index

Properties
HostBindings
Accessors

Constructor

constructor()

HostBindings

attr.data-e2e
Type : string
Default value : 'eui-time-range-picker'
class
Type : string

Properties

e2eAttr
Type : string
Default value : 'eui-time-range-picker'
Decorators :
@HostBinding('attr.data-e2e')
endDateLabel
Type : string

Translated label for the end time picker
endHours
Type : number

Current hour value for the end time (0-23)
endMins
Type : number

Current minute value for the end time (0-59)
endSecs
Type : number

Current second value for the end time (0-59)
endTimeFormControl
Type : unknown
Default value : new FormControl()

Form control managing the end time picker value
hasSeconds
Type : boolean

Determines whether seconds selection is displayed in the time pickers
hours
Type : number

Current hour value for the start time (0-23)
mins
Type : number

Current minute value for the start time (0-59)
secs
Type : number

Current second value for the start time (0-59)
startDateLabel
Type : string

Translated label for the start time picker
startTimeFormControl
Type : unknown
Default value : new FormControl()

Form control managing the start time picker value
stepHours
Type : number

Increment step for hour selection in the time picker
stepMinutes
Type : number

Increment step for minute selection in the time picker
stepSeconds
Type : number

Increment step for second selection in the time picker

Accessors

class
getclass()

results matching ""

    No results matching ""