Date picker
At its most bare the EuiDatePicker only requires props for selected and onChange. It depends on moment for all of its formatting.
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.
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.
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.
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.
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.
Date picker inline
Use the inline prop to display the date picker directly in the page instead of inside a popover. This prop works for both EuiDatePicker as well as EuiDatePickerRange. 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.
classNamewill pass onto the input.calendarClassNamewill pass onto the calendar itself.dayClassNamewill pass onto specificed days.popperClassNamewill 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 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. (date: Moment) => string | Default value |
Prop fullWidth# | Description and type Renders the input as full width boolean | Default value false |
Prop compressed# | Description and type Renders the input with compressed height and sizing boolean | Default value |
Prop inputRef# | Description and type ref for the ReactDatePicker instance Ref<Component<ReactDatePickerProps, any, any>> | Default value |
Prop isInvalid# | Description and type Provides styling to the input when invalid boolean | Default value |
Prop isLoading# | Description and type Provides styling to the input when loading boolean | Default value |
Prop onClear# | Description and type What to do when the input is cleared by the x icon MouseEventHandler<HTMLButtonElement> | Default value |
Prop openToDate# | Description and type Opens to this date (in moment format) on first press, regardless of selection Moment | Default value |
Prop placeholder# | Description and type Shows only when no date is selected string | Default value |
Prop inline# | Description and type Displays the date picker calendar on directly on the page. boolean | Default value |
Prop shadow# | Description and type Allows turning the shadow off if using the boolean | Default value true |
Prop showIcon# | Description and type Show the icon in input boolean | Default value true |
Prop iconType# | Description and type Pass an icon type to change the default 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'. "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. Ignored if PrependAppendType | Default value |
Prop prepend# | Description and type Creates an input group with element(s) coming before the input. Ignored if PrependAppendType | Default value |
Prop controlOnly# | Description and type Completely removes form control layout wrapper and ignores Best used inside EuiFormControlLayoutDelimited. 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 (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 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 string | Default value |
Prop customInput# | Description and type Replaces the input with any node, like a button ReactNode | Default value |
Prop customInputRef# | Description and type Type: string | Default value |
Prop dateFormat# | Description and type Accepts any moment format string 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 Moment[] | Default value |
Prop locale# | Description and type Switches the locale / display. "en-us", "zn-ch"...etc LocaleSpecifier | Default value |
Prop maxDate# | Description and type The max date accepted (in moment format) as a selection Moment | Default value |
Prop maxTime# | Description and type The max time accepted (in moment format) as a selection Moment | Default value |
Prop minDate# | Description and type The min date accepted (in moment format) as a selection Moment | Default value |
Prop minTime# | Description and type The min time accepted (in moment format) as a selection 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 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) 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 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 boolean | Default value false |
Prop showTimeSelectOnly# | Description and type Only show the time selector, not the calendar 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 boolean | Default value |
Prop timeFormat# | Description and type The format of the time within the selector, in moment notation 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 number | Default value |
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 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 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 |