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

###### Properties
Public endRangeFormControl Public isInvalid Public isTouched selectedDates Public startRangeFormControl
###### Methods
Public onFirstDateChange onFirstDateClear Public onSecondDateChange onSecondDateClear registerOnChange registerOnTouched Public Optional setDisabledState writeValue
###### Inputs
comparisonEnd comparisonStart e2eAttr endDateDefaultValue firstInputAriaLabel firstInputPlaceholder hasSeconds isClearable isDisabled islongDateFormat isReadOnly isResponsive isTimeRange maxDate minDate secondInputAriaLabel secondInputPlaceholder startDateDefaultValue startDateId startView stepHours stepMinutes stepSeconds togglerIconSvg togglerLabel
###### Outputs
firstSelectedDate secondSelectedDate
###### HostBindings
class
###### Accessors
class

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

# results matching ""

# No results matching ""