[EuiDatePicker] Fix year dropdown when using minDate or maxDate

src-docs/src/views/date_picker/date_picker_example.js

@@ -35,6 +35,9 @@ import Range from './range';
 const rangeSource = require('!!raw-loader!./range');
 const rangeHtml = renderToHtml(Range);
 
+import RangeRestricted from './range_restricted';
+const rangeRestrictedSource = require('!!raw-loader!./range_restricted');
+
 import MinMax from './min_max';
 const minMaxSource = require('!!raw-loader!./min_max');
 const minMaxHtml = renderToHtml(MinMax);
@@ -131,6 +134,35 @@ const rangeSnippet = `<EuiDatePickerRange
   }
 />`;
 
+const rangeRestrictedSnippet = `<EuiDatePickerRange
+  startDateControl={
+    <EuiDatePicker
+      selected={startDate}
+      onChange={setStartDate}
+      startDate={startDate}
+      endDate={endDate}
+      minDate={minDate}
+      maxDate={endDate}
+      isInvalid={isInvalid}
+      aria-label="Start date"
+      showTimeSelect
+    />
+  }
+  endDateControl={
+    <EuiDatePicker
+      selected={endDate}
+      onChange={setEndDate}
+      startDate={startDate}
+      endDate={endDate}
+      minDate={startDate}
+      maxDate={maxDate}
+      isInvalid={isInvalid}
+      aria-label="End date"
+      showTimeSelect
+    />
+  }
+/>`;
+
 const minMaxSnippet = [
   `<EuiDatePicker
   showTimeSelect
@@ -320,6 +352,28 @@ export const DatePickerExample = {
       snippet: rangeSnippet,
       props: { EuiDatePickerRange },
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: rangeRestrictedSource,
+        },
+      ],
+      text: (
+        <p>
+          <h3>
+            Dynamic <EuiCode>minDate</EuiCode> and <EuiCode>maxDate</EuiCode>
+          </h3>
+          By using <EuiCode>minDate</EuiCode> and <EuiCode>maxDate</EuiCode>,
+          and updating the values based on <EuiCode>startDate</EuiCode> and{' '}
+          <EuiCode>endDate</EuiCode>, users get immediate feedback on what range
+          values are allowed.
+        </p>
+      ),
+      demo: <RangeRestricted />,
+      snippet: rangeRestrictedSnippet,
+      props: { EuiDatePickerRange },
+    },
     {
       title: 'Only allow specific dates and times',
       source: [

src-docs/src/views/date_picker/range_restricted.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import moment from 'moment';
+
+import { EuiDatePicker, EuiDatePickerRange } from '../../../../src/components';
+
+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
+      startDateControl={
+        <EuiDatePicker
+          selected={startDate}
+          onChange={setStartDate}
+          startDate={startDate}
+          endDate={endDate}
+          minDate={minDate}
+          maxDate={endDate}
+          isInvalid={isInvalid}
+          aria-label="Start date"
+          showTimeSelect
+        />
+      }
+      endDateControl={
+        <EuiDatePicker
+          selected={endDate}
+          onChange={setEndDate}
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate}
+          maxDate={maxDate}
+          isInvalid={isInvalid}
+          aria-label="End date"
+          showTimeSelect
+        />
+      }
+    />
+  );
+};