[EuiSuperDatePicker] Support restricted date range (#8071)

packages/eui/changelogs/upcoming/8071.md

@@ -0,0 +1,2 @@
+- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support restricting date range selections
+

packages/eui/src-docs/src/views/super_date_picker/super_date_picker_example.js

@@ -41,6 +41,9 @@ const superDatePickerPatternSource = require('!!raw-loader!./super_date_picker_p
 import SuperDatePickerLocale from './super_date_picker_locale';
 const superDatePickerLocaleSource = require('!!raw-loader!./super_date_picker_locale');
 
+import SuperDatePickerRangeRestricted from './super_date_picker_range_restricted';
+const superDatePickerRangeRestrictedSource = require('!!raw-loader!./super_date_picker_range_restricted');
+
 const superDatePickerSnippet = `<EuiSuperDatePicker
   onTimeChange={onTimeChange}
   start="now-30m"
@@ -71,6 +74,15 @@ const superDatePickerLocaleSnippet = `<EuiSuperDatePicker
   onTimeChange={onTimeChange}
 />`;
 
+const superDatePickerRangeRestrictedSnippet = `<EuiSuperDatePicker
+  start="now-1h"
+  end="now-15m"
+  minDate={moment('10/01/2024')}
+  maxDate={moment('11/01/2024')}
+  dateFormat="MM DD, YYYY"
+  onTimeChange={onTimeChange}
+/>`;
+
 export const SuperDatePickerExample = {
   title: 'Super date picker',
   intro: (
@@ -391,5 +403,28 @@ if (!endMoment || !endMoment.isValid()) {
       snippet: superDatePickerLocaleSnippet,
       demo: <SuperDatePickerLocale />,
     },
+    {
+      title: 'Restricted Range',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: superDatePickerRangeRestrictedSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            To limit the range from which users can choose a date, you can use{' '}
+            <EuiCode>minDate</EuiCode> and <EuiCode>maxDate</EuiCode>. By
+            updating the date input values for <EuiCode>start</EuiCode> and{' '}
+            <EuiCode>end</EuiCode> users get immediate feedback on what range
+            values are allowed.
+          </p>
+        </>
+      ),
+      props: { EuiSuperDatePicker },
+      snippet: superDatePickerRangeRestrictedSnippet,
+      demo: <SuperDatePickerRangeRestricted />,
+    },
   ],
 };

packages/eui/src-docs/src/views/super_date_picker/super_date_picker_range_restricted.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import {
+  EuiSuperDatePicker,
+  OnTimeChangeProps,
+} from '../../../../src/components';
+import moment from 'moment';
+
+export default () => {
+  const [start, setStart] = useState('now-30m');
+  const [end, setEnd] = useState('now');
+  const minDate = moment().subtract(1, 'M');
+  const maxDate = moment().add(1, 'M');
+
+  const onTimeChange = ({ start, end }: OnTimeChangeProps) => {
+    setStart(start);
+    setEnd(end);
+  };
+
+  return (
+    <EuiSuperDatePicker
+      start={start}
+      end={end}
+      minDate={minDate}
+      maxDate={maxDate}
+      onTimeChange={onTimeChange}
+    />
+  );
+};

packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx

@@ -45,6 +45,8 @@ export interface EuiAbsoluteTabProps {
   roundUp: boolean;
   labelPrefix: string;
   utcOffset?: number;
+  minDate?: Moment;
+  maxDate?: Moment;
 }
 
 export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
@@ -55,6 +57,8 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
   locale,
   roundUp,
   utcOffset,
+  minDate,
+  maxDate,
   labelPrefix,
 }) => {
   const styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
@@ -157,6 +161,8 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
         timeFormat={timeFormat}
         locale={locale}
         utcOffset={utcOffset}
+        minDate={minDate}
+        maxDate={maxDate}
       />
       <EuiFlexGroup
         component="form"

packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

@@ -12,7 +12,7 @@ import React, {
   MouseEventHandler,
 } from 'react';
 import classNames from 'classnames';
-import { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
+import { LocaleSpecifier, Moment } from 'moment'; // eslint-disable-line import/named
 
 import { useEuiMemoizedStyles } from '../../../../services';
 import { CommonProps } from '../../../common';
@@ -46,6 +46,8 @@ export interface EuiDatePopoverButtonProps {
   timeFormat: string;
   value: string;
   utcOffset?: number;
+  minDate?: Moment;
+  maxDate?: Moment;
   compressed?: boolean;
   timeOptions: TimeOptions;
 }
@@ -66,6 +68,8 @@ export const EuiDatePopoverButton: FunctionComponent<
     locale,
     dateFormat,
     utcOffset,
+    minDate,
+    maxDate,
     timeFormat,
     isOpen,
     onPopoverToggle,
@@ -150,6 +154,8 @@ export const EuiDatePopoverButton: FunctionComponent<
         position={position}
         utcOffset={utcOffset}
         timeOptions={timeOptions}
+        minDate={minDate}
+        maxDate={maxDate}
       />
     </EuiPopover>
   );

packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { LocaleSpecifier } from 'moment';
+import { LocaleSpecifier, Moment } from 'moment';
 
 import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiPaddingCSS } from '../../../../global_styling';
@@ -37,6 +37,8 @@ export interface EuiDatePopoverContentProps {
   locale?: LocaleSpecifier;
   position: 'start' | 'end';
   utcOffset?: number;
+  minDate?: Moment;
+  maxDate?: Moment;
   timeOptions: TimeOptions;
 }
 
@@ -53,6 +55,8 @@ export const EuiDatePopoverContent: FunctionComponent<
   position,
   utcOffset,
   timeOptions,
+  minDate,
+  maxDate,
 }) => {
   const styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
 
@@ -101,6 +105,8 @@ export const EuiDatePopoverContent: FunctionComponent<
           roundUp={roundUp}
           labelPrefix={labelPrefix}
           utcOffset={utcOffset}
+          minDate={minDate}
+          maxDate={maxDate}
         />
       ),
       'data-test-subj': 'superDatePickerAbsoluteTab',

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import moment from 'moment';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect } from '@storybook/test';
 import { within } from '../../../../.storybook/test';
@@ -48,6 +49,8 @@ const meta: Meta<EuiSuperDatePickerProps> = {
     isLoading: false,
     isQuickSelectOnly: false,
     commonlyUsedRanges: [{ start: 'now/d', end: 'now/d', label: 'Today' }],
+    maxDate: undefined,
+    minDate: undefined,
   },
 };
 enableFunctionToggleControls(meta, ['onTimeChange']);
@@ -89,6 +92,28 @@ export const CustomQuickSelectPanel: Story = {
   },
 };
 
+export const RestrictedRange: Story = {
+  parameters: {
+    controls: {
+      include: [
+        'dateFormat',
+        'start',
+        'end',
+        'minDate',
+        'maxDate',
+        'onTimeChange',
+      ],
+    },
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  args: {
+    minDate: moment('10/01/2024'),
+    maxDate: moment('11/01/2024'),
+  },
+};
+
 function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
   function applyMyCustomTime() {
     applyTime!({ start: 'now-30d', end: 'now+7d' });

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx

@@ -16,6 +16,7 @@ import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
 } from './super_date_picker';
+import moment from 'moment';
 
 const noop = () => {};
 
@@ -396,5 +397,83 @@ describe('EuiSuperDatePicker', () => {
         expect(startButton).toHaveTextContent('300 days ago');
       });
     });
+
+    describe('minDate', () => {
+      const props = {
+        onTimeChange: noop,
+        end: 'now',
+      };
+
+      it('is valid when the start value is set after the minDate', () => {
+        const { container } = render(
+          <EuiSuperDatePicker
+            {...props}
+            start="10/01/2024"
+            minDate={moment('10/01/2024')}
+          />
+        );
+
+        const formWraper = container.querySelector(
+          '.euiFormControlLayout__childrenWrapper'
+        )!;
+
+        expect(formWraper.className).not.toContain('invalid');
+      });
+
+      it('is invalid when the start value is set before the minDate', () => {
+        const { container } = render(
+          <EuiSuperDatePicker
+            {...props}
+            start="09/30/2024"
+            minDate={moment('10/01/2024')}
+          />
+        );
+
+        const formWraper = container.querySelector(
+          '.euiFormControlLayout__childrenWrapper'
+        )!;
+
+        expect(formWraper.className).toContain('invalid');
+      });
+    });
+
+    describe('maxDate', () => {
+      const props = {
+        onTimeChange: noop,
+        start: '10/01/2024',
+      };
+
+      it('is valid when the end value is set before the maxDate', () => {
+        const { container } = render(
+          <EuiSuperDatePicker
+            {...props}
+            end="10/31/2024"
+            maxDate={moment('11/01/2024')}
+          />
+        );
+
+        const formWraper = container.querySelector(
+          '.euiFormControlLayout__childrenWrapper'
+        )!;
+
+        expect(formWraper.className).not.toContain('invalid');
+      });
+
+      it('is invalid when the end date exceeds the maxDate', () => {
+        const { container } = render(
+          <EuiSuperDatePicker
+            {...props}
+            end="11/02/2024"
+            maxDate={moment('11/01/2024')}
+          />
+        );
+
+        const formWraper = container.querySelector(
+          '.euiFormControlLayout__childrenWrapper'
+        )!;
+
+        expect(formWraper.className).toContain('invalid');
+      });
+    });
   });
 });