Date picker range

To create a single date range control, use EuiDatePickerRange and pass individual

EuiDatePicker components into the startDateControl 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.

Loading...

tip

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.

Loading...

Props

EuiDatePickerRange

Extends InputHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop endDateControl# ↦	Description and type The end date EuiDatePicker element Type: ReactElement ↦	Default value Required ↵
Prop startDateControl# ↦	Description and type The start date EuiDatePicker element Type: 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. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop prepend# ↦	Description and type Creates an input group with element(s) coming before children. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop fullWidth# ↦	Description and type Expand to fill 100% of the parent. Defaults to fullWidth prop of <EuiForm>. Type: boolean ↦	Default value false ↵
Prop isLoading# ↦	Description and type Type: boolean ↦	Default value ↵
Prop compressed# ↦	Description and type Type: boolean ↦	Default value ↵
Prop readOnly# ↦	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 Type: ReactNode ↦	Default value ↵
Prop iconType# ↦	Description and type Pass either an icon type or set to false to remove icon entirely Type: boolean | IconType ↦	Default value true ↵
Prop isCustom# ↦	Description and type Won't apply any additional props to start and end date components Type: boolean ↦	Default value ↵
Prop disabled# ↦	Description and type Passes through to each control Type: boolean ↦	Default value ↵
Prop inline# ↦	Description and type Displays both date picker calendars directly on the page. Will not render iconType, fullWidth, prepend, or append. Passes through to each control if isCustom is not set. Type: boolean ↦	Default value ↵
Prop shadow# ↦	Description and type Allows turning the shadow off if using the inline prop Type: boolean ↦	Default value true ↵
Prop onBlur# ↦	Description and type Triggered whenever the start or end controls are blurred Type: FocusEventHandler<HTMLInputElement> ↦	Default value ↵
Prop onFocus# ↦	Description and type Triggered whenever the start or end controls are focused Type: FocusEventHandler<HTMLInputElement> ↦	Default value ↵

𐘂𐘂