Elastic UI Framework - Date Picker

At its most bare the EuiDatePicker only requires props for selected and onChange. It depends on moment for all of its formatting.

Select a date

Date picker states

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

Form row validation

Here's an example of an error

You might have more than one error, so pass an array.

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.

Time select on

Only time select, 24 hour clock

Inject additional times into the list

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.

US with fractional seconds

China

Korea

Germany on 24 hour clock

Date picker range

By passing startDate and endDate props you can provide styling the range in between two dates. To further style the group as a single control, use EuiDatePickerRange and pass the date picker controls into the startDateControl and endDateControl props.

→

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.

Only allow a certain range of dates

Only allow a certain range of times

Exclude yesterday and today

Exclude 12AM and 5PM from selection

Filter so only weekdays are selectable

Open to a specific date

Use openToDate to default selection to a specific date.

Select a 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.

Select a date

UTC offset

Date picker inline

Use the inline prop to display the date picker directly in the page. If you do not need the shadows / popover effect to the date picker then also apply the shadow=false prop as shown in the second example.

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 specificed days.

className example

calendarClassName example

dayClassName example

popperClassName example

Super date picker

start and end date times are passed as strings in either datemath format (e.g.: now, now-15m, now-15m/m) or as absolute date in the format YYYY-MM-DDTHH:mm:ss.SSSZ. Use datemath to convert start and end strings into moment objects.


import dateMath from '@elastic/datemath';

const startMoment = dateMath.parse(start);
// dateMath.parse is inconsistent with unparsable strings.
// Sometimes undefined is returned, other times an invalid moment is returned
if (!startMoment || !startMoment.isValid()) {
  throw new Error('Unable to parse start string');
}

// Pass roundUp when parsing end string
const endMoment = dateMath.parse(end, { roundUp: true });
if (!endMoment || !endMoment.isValid()) {
  throw new Error('Unable to parse end string');
}

onTimeChange will be immediately invoked when start and end change from interactions with Quick select, Commonly used, or Recently used date ranges since these interactions set both start and end in a single event.

onTimeChange will not be invoked whenstart and end change from interactions with Absolute, Relative, and Now tabs. onTimeChange will be invoked when the user clicks the Update button. This gives users the ability to set both start and end before triggering onTimeChange. Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.

Set isAutoRefreshOnly to true to limit the component to only display auto refresh content. This is useful in cases where there is no time data but auto-refresh configuration is still desired.

Show apply button

Is auto-refresh only

Show custom quick select panel

Is disabled

start

EuiSuperDatePicker should be resilient to invalid start values. Try to break it with unexpected values

end

EuiSuperDatePicker should be resilient to invalid end values. Try to break it with unexpected values