Date picker

EuiDatePicker is the foundational component that all other EUI date and time controls are built upon. It itself depends upon moment for all of its formatting, and a forked and modified version of react-datepicker for accessibility.

At minimum, the EuiDatePicker requires the

selected and onChange props to be passed.

Date picker states

Examples of how the input can appear within a form. This should match our other form styles.

Time selection

Two props control time selection. showTimeSelect will make time selection appear next to the calendar and showTimeSelectOnly will exclude the calendar and make the time selection the only thing you see. Make sure to adjust your dateFormat and timeFormat values to match.

Locale

Locale formatting is achieved by using the locale,timeFormat, and dateFormat props. The latter will take any moment() notation. Check Date format by country for formatting examples.

warning

Moment will try to load the locale on demand when it is used. Bundlers that do not support dynamic require statements will need to explicitly import the locale, e.g. import 'moment/locale/zh-cn'. See the below demo JS for examples.

Only allow specific dates and times

Use the minDate,maxDate,minTime, and maxTimeprops to specify specific ranges the selected code must must fall into. You can also use the excludeDates andexcludeTimes property to disallow a specific array of items from selection.

Open to a specific date

Use openToDate to default selection to a specific date.

Custom input

Use customInput to pass a custom input to trigger your calendar.

UTC offsets

Use utcOffset to apply an offset to the datetime.

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.

Custom classes

Custom classes can be passed to various bits of the calendar and input.

className will pass onto the input.
calendarClassName will pass onto the calendar itself.
dayClassName will pass onto specified days.
popperClassName will pass onto the popover.

Props

EuiDatePicker


Prop	Description and type	Default value
Prop className#	Description and type Added to the actual input of the calendar 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 dayClassName#	Description and type Applies classes to the numbered days provided. Check docs for example. Type: `(date: Moment) => string`	Default value
Prop fullWidth#	Description and type Renders the input as full width Type: `boolean`	Default value `false`
Prop compressed#	Description and type Renders the input with compressed height and sizing Type: `boolean`	Default value
Prop inputRef#	Description and type ref for the ReactDatePicker instance Type: `Ref<Component<ReactDatePickerProps, any, any>>`	Default value
Prop isInvalid#	Description and type Provides styling to the input when invalid Type: `boolean`	Default value
Prop isLoading#	Description and type Provides styling to the input when loading Type: `boolean`	Default value
Prop onClear#	Description and type What to do when the input is cleared by the x icon Type: `MouseEventHandler<HTMLButtonElement>`	Default value
Prop openToDate#	Description and type Opens to this date (in moment format) on first press, regardless of selection Type: `Moment`	Default value
Prop placeholder#	Description and type Shows only when no date is selected Type: `string`	Default value
Prop inline#	Description and type Displays the date picker calendar on directly on the page. Will not render `iconType` or `fullWidth`. 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 showIcon#	Description and type Show the icon in input Type: `boolean`	Default value `true`
Prop iconType#	Description and type Pass an icon type to change the default `calendar` or `clock` icon Type: `IconType \| IconShape`	Default value
Prop popoverPlacement#	Description and type Sets the placement of the popover. Use EuiPopover values: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'. Type: `"upCenter" \| "upLeft" \| "upRight" \| "downCenter" \| "downLeft" \| "downRight" \| "leftCenter" \| "leftUp" \| "leftDown" \| "rightCenter" \| "rightUp" \| "rightDown"`	Default value `downLeft`
Prop append#	Description and type Creates an input group with element(s) coming before the input. `string` \| `ReactElement` or an array of these Ignored if `inline` or `controlOnly` are true. Type: `PrependAppendType`	Default value
Prop prepend#	Description and type Creates an input group with element(s) coming before the input. `string` \| `ReactElement` or an array of these Ignored if `inline` or `controlOnly` are true. Type: `PrependAppendType`	Default value
Prop controlOnly#	Description and type Completely removes form control layout wrapper and ignores `iconType`, `prepend`, and `append`. Best used inside EuiFormControlLayoutDelimited. Type: `boolean`	Default value
Prop disabled#	Description and type Type: `boolean`	Default value
Prop value#	Description and type Type: `string`	Default value
Prop title#	Description and type Type: `string`	Default value
Prop id#	Description and type Type: `string`	Default value
Prop tabIndex#	Description and type Type: `number`	Default value
Prop name#	Description and type Type: `string`	Default value
Prop autoFocus#	Description and type Type: `boolean`	Default value
Prop onFocus#	Description and type Type: `(event: FocusEvent<HTMLInputElement, Element>) => void`	Default value
Prop onBlur#	Description and type Type: `(event: FocusEvent<HTMLInputElement, Element>) => void`	Default value
Prop onChange#	Description and type What to do when the input changes Type: `(date: Moment, event?: SyntheticEvent<any, Event>) => void`	Default value
Prop onKeyDown#	Description and type Type: `(event: KeyboardEvent<HTMLDivElement>) => void`	Default value
Prop onSelect#	Description and type Type: `(date: Moment, event?: SyntheticEvent<any, Event>) => void`	Default value
Prop autoComplete#	Description and type Type: `string`	Default value
Prop readOnly#	Description and type Type: `boolean`	Default value
Prop required#	Description and type Type: `boolean`	Default value
Prop onClickOutside#	Description and type Type: `(event: MouseEvent<HTMLDivElement, MouseEvent>) => void`	Default value
Prop adjustDateOnChange#	Description and type Whether changes to Year and Month (via dropdowns) should trigger `onChange` Type: `boolean`	Default value `true`
Prop accessibleMode#	Description and type Type: `boolean`	Default value
Prop allowSameDay#	Description and type Type: `boolean`	Default value
Prop calendarClassName#	Description and type Optional class added to the calendar portion of datepicker Type: `string`	Default value
Prop customInput#	Description and type Replaces the input with any node, like a button Type: `ReactNode`	Default value
Prop customInputRef#	Description and type Type: `string`	Default value
Prop dateFormat#	Description and type Accepts any moment format string Type: `string \| string[]`	Default value `MM/DD/YYYY`
Prop dateFormatCalendar#	Description and type Type: `string`	Default value
Prop endDate#	Description and type Type: `Moment`	Default value
Prop excludeDates#	Description and type Type: `Moment[]`	Default value
Prop excludeTimes#	Description and type Type: `Moment[]`	Default value
Prop filterDate#	Description and type Type: `(date: Moment) => boolean`	Default value
Prop forceShowMonthNavigation#	Description and type Type: `boolean`	Default value
Prop formatWeekNumber#	Description and type Type: `(date: Moment) => string \| number`	Default value
Prop highlightDates#	Description and type Type: `Moment[]`	Default value
Prop includeDates#	Description and type Type: `Moment[]`	Default value
Prop includeTimes#	Description and type Type: `Moment[]`	Default value
Prop injectTimes#	Description and type Adds additional times to the time selector other then :30 increments Type: `Moment[]`	Default value
Prop locale#	Description and type Switches the locale / display. "en-us", "zn-ch"...etc Type: `LocaleSpecifier`	Default value
Prop maxDate#	Description and type The max date accepted (in moment format) as a selection Type: `Moment`	Default value
Prop maxTime#	Description and type The max time accepted (in moment format) as a selection Type: `Moment`	Default value
Prop minDate#	Description and type The min date accepted (in moment format) as a selection Type: `Moment`	Default value
Prop minTime#	Description and type The min time accepted (in moment format) as a selection Type: `Moment`	Default value
Prop onChangeRaw#	Description and type Type: `(event: FocusEvent<HTMLInputElement, Element>) => void`	Default value
Prop onMonthChange#	Description and type Type: `(date: Moment) => void`	Default value
Prop onWeekSelect#	Description and type Type: `(firstDayOfWeek: Moment, weekNumber: string \| number, event?: SyntheticEvent<any, Event>) => void`	Default value
Prop onYearChange#	Description and type Type: `(date: Moment) => void`	Default value
Prop peekNextMonth#	Description and type Type: `boolean`	Default value
Prop placeholderText#	Description and type Type: `string`	Default value
Prop popperClassName#	Description and type Class applied to the popup, when inline is false Type: `string`	Default value
Prop popperContainer#	Description and type Type: `(props: { children: ReactNode[]; }) => ReactNode`	Default value
Prop popperProps#	Description and type Type: `Partial<EuiPopoverProps>`	Default value
Prop preventOpenOnFocus#	Description and type Type: `boolean`	Default value
Prop scrollableMonthYearDropdown#	Description and type Type: `boolean`	Default value
Prop scrollableYearDropdown#	Description and type Type: `boolean`	Default value
Prop selected#	Description and type The selected datetime (in moment format) Type: `Moment`	Default value
Prop selectsEnd#	Description and type Type: `boolean`	Default value
Prop selectsStart#	Description and type Type: `boolean`	Default value
Prop shouldCloseOnSelect#	Description and type Will close the popup on selection Type: `boolean`	Default value `true`
Prop showDisabledMonthNavigation#	Description and type Type: `boolean`	Default value
Prop showMonthDropdown#	Description and type Type: `boolean`	Default value
Prop showTimeSelect#	Description and type Show the time selection alongside the calendar Type: `boolean`	Default value `false`
Prop showTimeSelectOnly#	Description and type Only show the time selector, not the calendar Type: `boolean`	Default value
Prop showYearDropdown#	Description and type Type: `boolean`	Default value
Prop startDate#	Description and type Type: `Moment`	Default value
Prop startOpen#	Description and type Type: `boolean`	Default value
Prop strictParsing#	Description and type Use Moment strict mode, allowing exact format matches only Type: `boolean`	Default value
Prop timeFormat#	Description and type The format of the time within the selector, in moment notation Type: `string`	Default value `hh:mm A`
Prop timeIntervals#	Description and type Type: `number`	Default value
Prop useWeekdaysShort#	Description and type Type: `boolean`	Default value
Prop utcOffset#	Description and type Type: `number`	Default value
Prop weekLabel#	Description and type Type: `string`	Default value
Prop yearDropdownItemNumber#	Description and type The total number of years to show as options in years selection dropdown Type: `number`	Default value

Date picker states.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}