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 | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop children# | Description and type Including any children will replace all innards with the provided children ReactNode | Default value |
Prop iconType# | Description and type Pass either an icon type or set to boolean | IconType | Default value true |
Prop isCustom# | Description and type Won't apply any additional props to start and end date components boolean | Default value |
Prop disabled# | Description and type Passes through to each control boolean | Default value |
Prop inline# | Description and type Displays both date picker calendars directly on the page. Passes through to each control if boolean | Default value |
Prop shadow# | Description and type Allows turning the shadow off if using the boolean | Default value true |
Prop onBlur# | Description and type Triggered whenever the start or end controls are blurred FocusEventHandler<HTMLInputElement> | Default value |
Prop onFocus# | Description and type Triggered whenever the start or end controls are focused FocusEventHandler<HTMLInputElement> | Default value |