# EuiDateRangeSelectorComponent

**Type:** component




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

## Inputs
- **comparisonEnd**: `any` - Sets the second comparison date range.
- **comparisonStart**: `any` - Sets the first comparison date range.
- **e2eAttr**: `string` - 
- **endDateDefaultValue**: `any` - Sets the default end date value.
- **firstInputAriaLabel**: `string` - Sets the aria-label of the first input field.
- **firstInputPlaceholder**: `string` - Sets the placeholder of the first input field.
- **hasSeconds**: `boolean` - Option to enable seconds in the time range picker.
- **isClearable**: `boolean` - Option to enable the clearable button in the input field.
- **isDisabled**: `boolean` - Option to enable the disabled state.
- **islongDateFormat**: `boolean` - Option to define a long date format.
- **isReadOnly**: `boolean` - Option to enable the readonly state.
- **isResponsive**: `boolean` - Option to make the date range field responsive.
- **isTimeRange**: `boolean` - Option to enable the time range picker.
- **maxDate**: `any` - Sets the maximum date that can be selected.
- **minDate**: `any` - Sets the minimum date that can be selected.
- **secondInputAriaLabel**: `string` - Sets the aria-label of the second input field.
- **secondInputPlaceholder**: `string` - Sets the placeholder of the second input field.
- **startDateDefaultValue**: `any` - Sets the default start date value.
- **startDateId**: `string` - Sets a unique id for the first input field.
- **startView**: `"month" | "year" | "multi-year"` - Sets the starting view of the calendar.
- **stepHours**: `number` - Sets the step value for the hours in the time picker.
- **stepMinutes**: `number` - Sets the step value for the minutes in the time picker.
- **stepSeconds**: `number` - Sets the step value for the seconds in the time picker.
- **togglerIconSvg**: `string` - Sets the svg icon for the toggler button.
- **togglerLabel**: `string` - Sets the label of the toggler button.

## Outputs
- **firstSelectedDate**: `EventEmitter` - Event emitted when the first date is selected.
- **secondSelectedDate**: `EventEmitter` - Event emitted when the second date is selected.
