### 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
e2eAttr endDateLabel endHours endMins endSecs endTimeFormControl hasSeconds hours mins secs startDateLabel startTimeFormControl stepHours stepMinutes stepSeconds
###### HostBindings
attr.data-e2e class
###### Accessors
class

### 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
get `class()`

# results matching ""

# No results matching ""