date-picker-range.mdx

sidebar_position	2
keywords	EuiDatePickerRange

import displayTogglesSource from '!raw-loader!../../../../src/components/display_toggles/display_toggles';

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.

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>

import React, { useState } from 'react';
import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
import moment from 'moment';
import { DisplayToggles } from './display_toggles';

export default () => {
  const [startDate, setStartDate] = useState(moment());
  const [endDate, setEndDate] = useState(moment().add(11, 'd'));

  return (
    /* DisplayToggles wrapper for Docs only */
    <DisplayToggles canPrepend={true} canAppend={true}>
      <EuiDatePickerRange
        startDateControl={
          <EuiDatePicker
            selected={startDate}
            onChange={(date) => date && setStartDate(date)}
            startDate={startDate}
            endDate={endDate}
            aria-label="Start date"
            showTimeSelect
          />
        }
        endDateControl={
          <EuiDatePicker
            selected={endDate}
            onChange={(date) => date && setEndDate(date)}
            startDate={startDate}
            endDate={endDate}
            aria-label="End date"
            showTimeSelect
          />
        }
      />
    </DisplayToggles>
  );
};

:::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.

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>

import React, { useState } from 'react';
import {
  EuiDatePicker,
  EuiDatePickerRange,
  EuiFlexGroup,
  EuiSwitch,
  EuiSpacer,
} from '@elastic/eui';
import moment from 'moment';
import { DisplayToggles } from './display_toggles';

export default () => {
  const [shadow, setShadow] = useState(true);
  const [showTimeSelect, setShowTimeSelect] = useState(false);

  const [startDate, setStartDate] = useState(moment());
  const [endDate, setEndDate] = useState(moment().add(11, 'd'));

  return (
    <>
      <EuiFlexGroup>
        <EuiSwitch
          label="Show shadow"
          checked={shadow}
          onChange={() => setShadow((toggle) => !toggle)}
        />
        <EuiSwitch
          label="Show time select"
          checked={showTimeSelect}
          onChange={() => setShowTimeSelect((toggle) => !toggle)}
        />
      </EuiFlexGroup>
      <EuiSpacer />
      <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}>
        <EuiDatePickerRange
          inline
          shadow={shadow}
          startDateControl={
            <EuiDatePicker
              aria-label="Start date"
              selected={startDate}
              onChange={(date) => date && setStartDate(date)}
              startDate={startDate}
              endDate={endDate}
              showTimeSelect={showTimeSelect}
            />
          }
          endDateControl={
            <EuiDatePicker
              aria-label="End date"
              selected={endDate}
              onChange={(date) => date && setEndDate(date)}
              startDate={startDate}
              endDate={endDate}
              showTimeSelect={showTimeSelect}
            />
          }
        />
      </DisplayToggles>
    </>
  );
};

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.

import React, { useState } from 'react';
import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
import moment from 'moment';

export default () => {
  const minDate = moment().subtract(2, 'y');
  const maxDate = moment();
  const [startDate, setStartDate] = useState(minDate);
  const [endDate, setEndDate] = useState(maxDate);

  const isInvalid =
    startDate > endDate || startDate < minDate || endDate > maxDate;

  return (
    <EuiDatePickerRange
      isInvalid={isInvalid}
      startDateControl={
        <EuiDatePicker
          selected={startDate}
          onChange={(date) => date && setStartDate(date)}
          startDate={startDate}
          endDate={endDate}
          minDate={minDate}
          maxDate={endDate}
          aria-label="Start date"
          showTimeSelect
        />
      }
      endDateControl={
        <EuiDatePicker
          selected={endDate}
          onChange={(date) => date && setEndDate(date)}
          startDate={startDate}
          endDate={endDate}
          minDate={startDate}
          maxDate={maxDate}
          aria-label="End date"
          showTimeSelect
        />
      }
    />
  );
};

Props

import docgen from '@elastic/eui-docgen/dist/components/date_picker';