# EuiDateRangeSelectorComponent

**Type:** component



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
```html
<eui-date-range-selector
  [firstInputPlaceholder]="'Start date'"
  [secondInputPlaceholder]="'End date'">
</eui-date-range-selector>
```

### With Form Control
```typescript
// 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
```html
<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


**Selector:** `eui-date-range-selector`

## Inputs
- **comparisonEnd**: `any` - End date for comparison range visualization. Displays as a secondary range in the calendar picker.
- **comparisonStart**: `any` - Start date for comparison range visualization. Displays as a secondary range in the calendar picker.
- **e2eAttr**: `string` - Data attribute for end-to-end testing identification.
- **endDateDefaultValue**: `any` - Initial value for the end date input field. Pre-populates the field on component initialization.
- **firstInputAriaLabel**: `string` - ARIA label for the start date input field. Provides accessible description for screen readers.
- **firstInputPlaceholder**: `string` - Placeholder text displayed in the start date input field when empty.
- **hasSeconds**: `boolean` - Shows seconds selection in the time picker. Only effective when isTimeRange is enabled.
- **isClearable**: `boolean` - Shows clear buttons in the input fields allowing users to reset selected dates.
- **isDisabled**: `boolean` - Disables the entire component. Prevents user interaction and applies disabled styling.
- **islongDateFormat**: `boolean` - Enables extended date format display with additional date information. Affects input field width and layout.
- **isReadOnly**: `boolean` - Makes the input fields read-only. Users can view but cannot modify the selected dates.
- **isResponsive**: `boolean` - Enables responsive layout behavior. Adjusts component layout for different screen sizes.
- **isTimeRange**: `boolean` - Enables time selection in addition to date selection. Adds time picker controls to the interface.
- **maxDate**: `any` - Maximum selectable date. Dates after this value will be disabled in the calendar picker.
- **minDate**: `any` - Minimum selectable date. Dates before this value will be disabled in the calendar picker.
- **secondInputAriaLabel**: `string` - ARIA label for the end date input field. Provides accessible description for screen readers.
- **secondInputPlaceholder**: `string` - Placeholder text displayed in the end date input field when empty.
- **startDateDefaultValue**: `any` - Initial value for the start date input field. Pre-populates the field on component initialization.
- **startDateId**: `string` - Unique identifier for the start date input field. Used for form association and accessibility.
- **startView**: `"month" | "year" | "multi-year"` - Initial calendar view when the picker opens. Determines the granularity of date selection.
- **stepHours**: `number` - Hour increment step for the time picker. Controls the granularity of hour selection.
- **stepMinutes**: `number` - Minute increment step for the time picker. Controls the granularity of minute selection.
- **stepSeconds**: `number` - Second increment step for the time picker. Controls the granularity of second selection.
- **togglerIconSvg**: `string` - SVG icon name displayed on the calendar toggle button.
- **togglerLabel**: `string` - Accessible label text for the calendar toggle button. Used for screen readers.

## Outputs
- **firstSelectedDate**: `EventEmitter` - Emitted when the start date is selected or changed. Payload contains the selected date value.
- **secondSelectedDate**: `EventEmitter` - Emitted when the end date is selected or changed. Payload contains the selected date value.