Info

File

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

Description

A date range selector component that allows users to select start and end dates with optional time selection. Provides a dual-input interface with calendar picker integration and supports form validation. Commonly used for filtering data by date ranges, booking systems, and reporting interfaces. Implements ControlValueAccessor for seamless integration with Angular reactive forms.

Basic Usage

Example :

<eui-date-range-selector
  [firstInputPlaceholder]="'Start date'"
  [secondInputPlaceholder]="'End date'">
</eui-date-range-selector>

With Form Control

Example :

// Component
dateRange = new FormControl({ startRange: null, endRange: null });

// Template
<eui-date-range-selector
  [formControl]="dateRange"
  [minDate]="minDate"
  [maxDate]="maxDate">
</eui-date-range-selector>

With Time Selection

Example :

<eui-date-range-selector
  [isTimeRange]="true"
  [hasSeconds]="true"
  [stepMinutes]="15">
</eui-date-range-selector>

Accessibility

Provides firstInputAriaLabel and secondInputAriaLabel for screen readers
Automatically announces date format to assistive technologies
Supports keyboard navigation through calendar and time pickers
Clear buttons are keyboard accessible when isClearable is enabled
Required state is properly communicated via aria-required attribute

Notes

Model must be EuiDateRangeSelectorDates with startRange and endRange properties
Use islongDateFormat for extended date display with time
isResponsive enables mobile-friendly stacked layout
Comparison ranges can be visualized with comparisonStart and comparisonEnd
Time picker appears in calendar overlay when isTimeRange is true

Implements

OnInit OnDestroy OnChanges ControlValueAccessor DoCheck

Metadata

encapsulation	`ViewEncapsulation.None`
selector	`eui-date-range-selector`
imports	`FormsModule` `ReactiveFormsModule` `TranslateModule` `MatDatepickerModule` `EUI_BUTTON` `EUI_ICON` `EUI_INPUT_TEXT`
templateUrl	`./eui-date-range-selector.component.html`
styleUrl	`./eui-date-range-selector.scss`

Index

Constructor

constructor()

Inputs

comparisonEnd

Type : any

End date for comparison range visualization. Displays as a secondary range in the calendar picker.

comparisonStart

Type : any

Start date for comparison range visualization. Displays as a secondary range in the calendar picker.

e2eAttr

Type : string

Default value : 'eui-date-range-selector'

Data attribute for end-to-end testing identification.

endDateDefaultValue

Type : any

Initial value for the end date input field. Pre-populates the field on component initialization.

firstInputAriaLabel

Type : string

ARIA label for the start date input field. Provides accessible description for screen readers.

firstInputPlaceholder

Type : string

Placeholder text displayed in the start date input field when empty.

hasSeconds

Type : boolean

Default value : false

Shows seconds selection in the time picker. Only effective when isTimeRange is enabled.

isClearable

Type : boolean

Default value : false

Shows clear buttons in the input fields allowing users to reset selected dates.

isDisabled

Type : boolean

Default value : false

Disables the entire component. Prevents user interaction and applies disabled styling.

islongDateFormat

Type : boolean

Default value : false

Enables extended date format display with additional date information. Affects input field width and layout.

isReadOnly

Type : boolean

Default value : false

Makes the input fields read-only. Users can view but cannot modify the selected dates.

isResponsive

Type : boolean

Default value : false

Enables responsive layout behavior. Adjusts component layout for different screen sizes.

isTimeRange

Type : boolean

Default value : false

Enables time selection in addition to date selection. Adds time picker controls to the interface.

maxDate

Type : any

Maximum selectable date. Dates after this value will be disabled in the calendar picker.

minDate

Type : any

Minimum selectable date. Dates before this value will be disabled in the calendar picker.

secondInputAriaLabel

Type : string

ARIA label for the end date input field. Provides accessible description for screen readers.

secondInputPlaceholder

Type : string

Placeholder text displayed in the end date input field when empty.

startDateDefaultValue

Type : any

Initial value for the start date input field. Pre-populates the field on component initialization.

startDateId

Type : string

Default value : `start-date-${uniqueId()}`

Unique identifier for the start date input field. Used for form association and accessibility.

startView

Type : "month" | "year" | "multi-year"

Default value : 'month'

Initial calendar view when the picker opens. Determines the granularity of date selection.

stepHours

Type : number

Default value : 1

Hour increment step for the time picker. Controls the granularity of hour selection.

stepMinutes

Type : number

Default value : 1

Minute increment step for the time picker. Controls the granularity of minute selection.

stepSeconds

Type : number

Default value : 1

Second increment step for the time picker. Controls the granularity of second selection.

togglerIconSvg

Type : string

Default value : 'eui-calendar'

SVG icon name displayed on the calendar toggle button.

togglerLabel

Type : string

Accessible label text for the calendar toggle button. Used for screen readers.

Outputs

firstSelectedDate

Type : EventEmitter

Emitted when the start date is selected or changed. Payload contains the selected date value.

secondSelectedDate

Type : EventEmitter

Emitted when the end date is selected or changed. Payload contains the selected date value.

HostBindings

class

Type : string

Methods

Public onFirstDateChange

onFirstDateChange(e: MatDatepickerInputEvent)

Method fired when the first date field changes.

Parameters :

Name	Type	Optional	Description
e	`MatDatepickerInputEvent<any>`	No	Event emitted when the first date changes.

Returns : void

onFirstDateClear

onFirstDateClear()

Method fired when the first date field is cleared.

Returns : void

Public onSecondDateChange

onSecondDateChange(e: MatDatepickerInputEvent)

Method fired when the second date field changes.

Parameters :

Name	Type	Optional	Description
e	`MatDatepickerInputEvent<any>`	No	Event emitted when the second date changes.

Returns : void

onSecondDateClear

onSecondDateClear()

Method fired when the second date field is cleared.

Returns : void

registerOnChange

registerOnChange(fn: any)

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

registerOnTouched

registerOnTouched(fn: any)

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

Public Optional setDisabledState

setDisabledState(isDisabled: boolean)

Sets the disabled state of the component based on the boolean value passed.

Parameters :

Name	Type	Optional	Description
isDisabled	`boolean`	No	The boolean value indicating whether the component should be disabled or not.

Returns : void

writeValue

writeValue(values: EuiDateRangeSelectorDates)

Parameters :

Name	Type	Optional
values	`EuiDateRangeSelectorDates`	No

Returns : void

Properties

Public endRangeFormControl

Type : unknown

Default value : new FormControl()

Public isInvalid

Type : boolean

Public isTouched

Type : boolean

selectedDates

Type : EuiDateRangeSelectorDates

Default value : { startRange: null, endRange: null }

Public startRangeFormControl

Type : unknown

Default value : new FormControl()

Accessors

class

getclass()

File

Description

Basic Usage

With Form Control

With Time Selection

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Constructor

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""