### File

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

### 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`
Sets the second comparison date range.

comparisonStart
Type : `any`
Sets the first comparison date range.

e2eAttr
Type : `string`
Default value : `'eui-date-range-selector'`

endDateDefaultValue
Type : `any`
Sets the default end date value.

firstInputAriaLabel
Type : `string`
Sets the aria-label of the first input field.

firstInputPlaceholder
Type : `string`
Sets the placeholder of the first input field.

hasSeconds
Type : `boolean`
Default value : `false`
Option to enable seconds in the time range picker.

isClearable
Type : `boolean`
Default value : `false`
Option to enable the clearable button in the input field.

isDisabled
Type : `boolean`
Default value : `false`
Option to enable the disabled state.

islongDateFormat
Type : `boolean`
Default value : `false`
Option to define a long date format.

isReadOnly
Type : `boolean`
Default value : `false`
Option to enable the readonly state.

isResponsive
Type : `boolean`
Default value : `false`
Option to make the date range field responsive.

isTimeRange
Type : `boolean`
Default value : `false`
Option to enable the time range picker.

maxDate
Type : `any`
Sets the maximum date that can be selected.

minDate
Type : `any`
Sets the minimum date that can be selected.

secondInputAriaLabel
Type : `string`
Sets the aria-label of the second input field.

secondInputPlaceholder
Type : `string`
Sets the placeholder of the second input field.

startDateDefaultValue
Type : `any`
Sets the default start date value.

startDateId
Type : `string`
Default value : ``start-date-${uniqueId()}``
Sets a unique id for the first input field.

startView
Type : `"month" | "year" | "multi-year"`
Default value : `'month'`
Sets the starting view of the calendar.

stepHours
Type : `number`
Default value : `1`
Sets the step value for the hours in the time picker.

stepMinutes
Type : `number`
Default value : `1`
Sets the step value for the minutes in the time picker.

stepSeconds
Type : `number`
Default value : `1`
Sets the step value for the seconds in the time picker.

togglerIconSvg
Type : `string`
Default value : `'eui-calendar-outline'`
Sets the svg icon for the toggler button.

togglerLabel
Type : `string`
Sets the label of the toggler button.

### Outputs

firstSelectedDate
Type : `EventEmitter`
Event emitted when the first date is selected.

secondSelectedDate
Type : `EventEmitter`
Event emitted when the second date is selected.

### HostBindings

class
Type : `string`

### Methods

Public onFirstDateChange
`onFirstDateChange(e: MatDatepickerInputEvent<any>)`

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<any>)`

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
Default value : `new FormControl()`

Public isInvalid
Type : `boolean`

Public isTouched
Type : `boolean`

selectedDates
Type : `EuiDateRangeSelectorDates`
Default value : `{ startRange: null, endRange: null }`

Public startRangeFormControl
Default value : `new FormControl()`

### Accessors

class
get `class()`

# results matching ""

# No results matching ""