### 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)`
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
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 ""