Date picker range
To create a single date range control, use EuiDatePickerRange and pass individual
EuiDatePicker components into thestartDateControl
and endDateControl
props. You can control the state of both inputs as direct props on EuiDatePickerRange as well as control each individually. Date specific props need to applied to the individual components.
If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using EuiSuperDatePicker.
Inline display
Use the inline
prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the shadow={false}
prop.
Dynamic minDate
and maxDate
By using minDate
and maxDate
, and updating the values based on startDate
and endDate
, users get immediate feedback on what range values are allowed.
Props
EuiDatePickerRange
Prop | Description and type | Default value |
---|---|---|
Prop endDateControl# | Description and type The end date ReactElement | Default value Required |
Prop startDateControl# | Description and type The start date ReactElement | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after children. PrependAppendType | Default value |
Prop prepend# | Description and type Creates an input group with element(s) coming before children. PrependAppendType | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop isLoading# | Description and type Type: boolean | Default value |
Prop readOnly# | Description and type Type: boolean | Default value |
Prop compressed# | Description and type Type: boolean |