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.