diff --git a/CHANGELOG.md b/CHANGELOG.md
index f76d87456ed..5aadec37fed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
- Fixed instance of `EuiScreenReader` text being exposed in `EuiDataGrid` sorting menu ([#5084](https://github.com/elastic/eui/pull/5084))
- Fixed default value of `EuiPagination`'s `activePage` to target first page ([#5053](https://github.com/elastic/eui/pull/5053))
- Fixed screen reader text from displaying in some `EuiDataGrid` cell popovers ([#5087](https://github.com/elastic/eui/pull/5087))
+- Fixed `EuiDatePicker` year dropdown when configured with `minDate` and/or `maxDate` ([#5069](https://github.com/elastic/eui/pull/5069))
**Theme: Amsterdam**
diff --git a/packages/react-datepicker.js b/packages/react-datepicker.js
index 63aaf14fef6..768a49f533b 100644
--- a/packages/react-datepicker.js
+++ b/packages/react-datepicker.js
@@ -212,11 +212,6 @@ UntouchabilityChecker.prototype.isUntouchable = function isUntouchable(node) {
var tabbable_1 = tabbable;
-var tabbable$1 = /*#__PURE__*/Object.freeze({
- default: tabbable_1,
- __moduleExports: tabbable_1
-});
-
var immutable = extend;
var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -242,8 +237,6 @@ var immutable$1 = /*#__PURE__*/Object.freeze({
__moduleExports: immutable
});
-var tabbable$2 = ( tabbable$1 && tabbable_1 ) || tabbable$1;
-
var xtend = ( immutable$1 && immutable ) || immutable$1;
var listeningFocusTrap = null;
@@ -425,7 +418,7 @@ function focusTrap(element, userOptions) {
if (container.contains(e.target)) return;
if (config.clickOutsideDeactivates) {
deactivate({
- returnFocus: !tabbable$2.isFocusable(e.target)
+ returnFocus: !tabbable_1.isFocusable(e.target)
});
} else {
e.preventDefault();
@@ -480,7 +473,7 @@ function focusTrap(element, userOptions) {
}
function updateTabbableNodes() {
- var tabbableNodes = tabbable$2(container);
+ var tabbableNodes = tabbable_1(container);
state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
state.lastTabbableNode =
tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
@@ -789,35 +782,35 @@ var YearDropdownOptions = function (_React$Component) {
var minYear = _this.props.minDate ? _this.props.minDate.year() : null;
var maxYear = _this.props.maxDate ? _this.props.maxDate.year() : null;
- if (!maxYear || !_this.state.yearsList.find(function (year) {
- return year === maxYear;
- })) {
- options.unshift(React__default.createElement(
- "div",
- {
- className: "react-datepicker__year-option",
- ref: "upcoming",
- key: "upcoming",
- onClick: _this.incrementYears
- },
- React__default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })
- ));
- }
-
- if (!minYear || !_this.state.yearsList.find(function (year) {
- return year === minYear;
- })) {
- options.push(React__default.createElement(
- "div",
- {
- className: "react-datepicker__year-option",
- ref: "previous",
- key: "previous",
- onClick: _this.decrementYears
- },
- React__default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
- ));
- }
+ // These elements were hidden with `display: none;` by custom EUI styles,
+ // which caused problems when `minDate` or `maxDate` were configured: https://github.com/elastic/eui/issues/5058
+ // Keeping a reference for now, but we may opt for removing these
+ // elements entirely during https://github.com/elastic/eui/issues/3901
+ // if (!maxYear || !this.state.yearsList.find(year => year === maxYear)) {
+ // options.unshift(
+ //
+ // );
+ // }
+
+ // if (!minYear || !this.state.yearsList.find(year => year === minYear)) {
+ // options.push(
+ //
+ // );
+ // }
return options;
};
@@ -4554,18 +4547,11 @@ if (!Object.keys) {
}
var implementation = keysShim;
-var implementation$1 = /*#__PURE__*/Object.freeze({
- default: implementation,
- __moduleExports: implementation
-});
-
-var require$$0 = ( implementation$1 && implementation ) || implementation$1;
-
var slice = Array.prototype.slice;
var origKeys = Object.keys;
-var keysShim$1 = origKeys ? function keys(o) { return origKeys(o); } : require$$0;
+var keysShim$1 = origKeys ? function keys(o) { return origKeys(o); } : implementation;
var originalKeys = Object.keys;
@@ -4633,6 +4619,13 @@ var shams = function hasSymbols() {
return true;
};
+var shams$1 = /*#__PURE__*/Object.freeze({
+ default: shams,
+ __moduleExports: shams
+});
+
+var hasSymbolSham = ( shams$1 && shams ) || shams$1;
+
var origSymbol = typeof Symbol !== 'undefined' && Symbol;
@@ -4642,9 +4635,14 @@ var hasSymbols = function hasNativeSymbols() {
if (typeof origSymbol('foo') !== 'symbol') { return false; }
if (typeof Symbol('bar') !== 'symbol') { return false; }
- return shams();
+ return hasSymbolSham();
};
+var hasSymbols$1 = /*#__PURE__*/Object.freeze({
+ default: hasSymbols,
+ __moduleExports: hasSymbols
+});
+
/* eslint no-invalid-this: 1 */
var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
@@ -4652,7 +4650,7 @@ var slice$1 = Array.prototype.slice;
var toStr$2 = Object.prototype.toString;
var funcType = '[object Function]';
-var implementation$2 = function bind(that) {
+var implementation$1 = function bind(that) {
var target = this;
if (typeof target !== 'function' || toStr$2.call(target) !== funcType) {
throw new TypeError(ERROR_MESSAGE + target);
@@ -4696,10 +4694,19 @@ var implementation$2 = function bind(that) {
return bound;
};
-var functionBind = Function.prototype.bind || implementation$2;
+var implementation$2 = /*#__PURE__*/Object.freeze({
+ default: implementation$1,
+ __moduleExports: implementation$1
+});
+
+var implementation$3 = ( implementation$2 && implementation$1 ) || implementation$2;
+
+var functionBind = Function.prototype.bind || implementation$3;
var src = functionBind.call(Function.call, Object.prototype.hasOwnProperty);
+var require$$0 = ( hasSymbols$1 && hasSymbols ) || hasSymbols$1;
+
var undefined$1;
var $SyntaxError = SyntaxError;
@@ -4740,7 +4747,7 @@ var ThrowTypeError = $gOPD
}())
: throwTypeError;
-var hasSymbols$1 = hasSymbols();
+var hasSymbols$2 = require$$0();
var getProto = Object.getPrototypeOf || function (x) { return x.__proto__; }; // eslint-disable-line no-proto
@@ -4752,7 +4759,7 @@ var INTRINSICS = {
'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
'%Array%': Array,
'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
- '%ArrayIteratorPrototype%': hasSymbols$1 ? getProto([][Symbol.iterator]()) : undefined$1,
+ '%ArrayIteratorPrototype%': hasSymbols$2 ? getProto([][Symbol.iterator]()) : undefined$1,
'%AsyncFromSyncIteratorPrototype%': undefined$1,
'%AsyncFunction%': needsEval,
'%AsyncGenerator%': needsEval,
@@ -4780,10 +4787,10 @@ var INTRINSICS = {
'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
'%isFinite%': isFinite,
'%isNaN%': isNaN,
- '%IteratorPrototype%': hasSymbols$1 ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
+ '%IteratorPrototype%': hasSymbols$2 ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
- '%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$1 ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
+ '%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$2 ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
'%Math%': Math,
'%Number%': Number,
'%Object%': Object,
@@ -4796,11 +4803,11 @@ var INTRINSICS = {
'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
'%RegExp%': RegExp,
'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
- '%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$1 ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
+ '%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$2 ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
'%String%': String,
- '%StringIteratorPrototype%': hasSymbols$1 ? getProto(''[Symbol.iterator]()) : undefined$1,
- '%Symbol%': hasSymbols$1 ? Symbol : undefined$1,
+ '%StringIteratorPrototype%': hasSymbols$2 ? getProto(''[Symbol.iterator]()) : undefined$1,
+ '%Symbol%': hasSymbols$2 ? Symbol : undefined$1,
'%SyntaxError%': $SyntaxError,
'%ThrowTypeError%': ThrowTypeError,
'%TypedArray%': TypedArray,
@@ -5095,10 +5102,17 @@ var callBound = function callBoundIntrinsic(name, allowMissing) {
return intrinsic;
};
+var callBound$1 = /*#__PURE__*/Object.freeze({
+ default: callBound,
+ __moduleExports: callBound
+});
+
+var callBound$2 = ( callBound$1 && callBound ) || callBound$1;
+
var hasToStringTag = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol';
-var $toString = callBound('Object.prototype.toString');
+var $toString = callBound$2('Object.prototype.toString');
var isStandardArguments = function isArguments(value) {
if (hasToStringTag && value && typeof value === 'object' && Symbol.toStringTag in value) {
@@ -5144,20 +5158,8 @@ var objectIs = function is(a, b) {
return false;
};
-var objectIs$1 = /*#__PURE__*/Object.freeze({
- default: objectIs,
- __moduleExports: objectIs
-});
-
var src$1 = functionBind.call(Function.call, Object.prototype.hasOwnProperty);
-var src$2 = /*#__PURE__*/Object.freeze({
- default: src$1,
- __moduleExports: src$1
-});
-
-var has$1 = ( src$2 && src$1 ) || src$2;
-
var regexExec = RegExp.prototype.exec;
var gOPD = Object.getOwnPropertyDescriptor;
@@ -5187,7 +5189,7 @@ var isRegex = function isRegex(value) {
}
var descriptor = gOPD(value, 'lastIndex');
- var hasLastIndexDataProperty = descriptor && has$1(descriptor, 'value');
+ var hasLastIndexDataProperty = descriptor && src$1(descriptor, 'value');
if (!hasLastIndexDataProperty) {
return false;
}
@@ -5195,7 +5197,7 @@ var isRegex = function isRegex(value) {
return tryRegexExecCall(value);
};
-var hasSymbols$2 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
+var hasSymbols$3 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
var toStr$4 = Object.prototype.toString;
var concat = Array.prototype.concat;
@@ -5239,7 +5241,7 @@ var defineProperty$2 = function (object, name, value, predicate) {
var defineProperties = function (object, map) {
var predicates = arguments.length > 2 ? arguments[2] : {};
var props = objectKeys(map);
- if (hasSymbols$2) {
+ if (hasSymbols$3) {
props = concat.call(props, Object.getOwnPropertySymbols(map));
}
for (var i = 0; i < props.length; i += 1) {
@@ -5254,7 +5256,7 @@ var defineProperties_1 = defineProperties;
var $Object = Object;
var $TypeError$1 = TypeError;
-var implementation$3 = function flags() {
+var implementation$4 = function flags() {
if (this != null && this !== $Object(this)) {
throw new $TypeError$1('RegExp.prototype.flags getter called on non-object');
}
@@ -5294,7 +5296,7 @@ var polyfill = function getPolyfill() {
return descriptor.get;
}
}
- return implementation$3;
+ return implementation$4;
};
var supportsDescriptors$2 = defineProperties_1.supportsDescriptors;
@@ -5322,11 +5324,11 @@ var shim = function shimFlags() {
return polyfill$$1;
};
-var flagsBound = callBind$2(implementation$3);
+var flagsBound = callBind$2(implementation$4);
defineProperties_1(flagsBound, {
getPolyfill: polyfill,
- implementation: implementation$3,
+ implementation: implementation$4,
shim: shim
});
@@ -5351,21 +5353,19 @@ var isDateObject = function isDateObject(value) {
return hasToStringTag$2 ? tryDateObject(value) : toStr$5.call(value) === dateClass;
};
-var is = ( objectIs$1 && objectIs ) || objectIs$1;
-
var getTime = Date.prototype.getTime;
function deepEqual(actual, expected, options) {
var opts = options || {};
// 7.1. All identical values are equivalent, as determined by ===.
- if (opts.strict ? is(actual, expected) : actual === expected) {
+ if (opts.strict ? objectIs(actual, expected) : actual === expected) {
return true;
}
// 7.3. Other pairs that do not both pass typeof value == 'object', equivalence is determined by ==.
if (!actual || !expected || (typeof actual !== 'object' && typeof expected !== 'object')) {
- return opts.strict ? is(actual, expected) : actual == expected;
+ return opts.strict ? objectIs(actual, expected) : actual == expected;
}
/*
@@ -8140,7 +8140,7 @@ if (__DEV__) {
var warning_1 = warning;
-var implementation$4 = createCommonjsModule(function (module, exports) {
+var implementation$5 = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
@@ -8338,14 +8338,14 @@ exports.default = createReactContext;
module.exports = exports['default'];
});
-var implementation$5 = unwrapExports(implementation$4);
+var implementation$6 = unwrapExports(implementation$5);
-var implementation$6 = /*#__PURE__*/Object.freeze({
- default: implementation$5,
- __moduleExports: implementation$4
+var implementation$7 = /*#__PURE__*/Object.freeze({
+ default: implementation$6,
+ __moduleExports: implementation$5
});
-var _implementation = ( implementation$6 && implementation$5 ) || implementation$6;
+var _implementation = ( implementation$7 && implementation$6 ) || implementation$7;
var lib = createCommonjsModule(function (module, exports) {
diff --git a/packages/react-datepicker/docs-site/bundle.js b/packages/react-datepicker/docs-site/bundle.js
index 10ce5096412..012ad74a3f8 100644
--- a/packages/react-datepicker/docs-site/bundle.js
+++ b/packages/react-datepicker/docs-site/bundle.js
@@ -29622,35 +29622,35 @@
var minYear = _this.props.minDate ? _this.props.minDate.year() : null;
var maxYear = _this.props.maxDate ? _this.props.maxDate.year() : null;
- if (!maxYear || !_this.state.yearsList.find(function (year) {
- return year === maxYear;
- })) {
- options.unshift(_react2.default.createElement(
- "div",
- {
- className: "react-datepicker__year-option",
- ref: "upcoming",
- key: "upcoming",
- onClick: _this.incrementYears
- },
- _react2.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })
- ));
- }
-
- if (!minYear || !_this.state.yearsList.find(function (year) {
- return year === minYear;
- })) {
- options.push(_react2.default.createElement(
- "div",
- {
- className: "react-datepicker__year-option",
- ref: "previous",
- key: "previous",
- onClick: _this.decrementYears
- },
- _react2.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })
- ));
- }
+ // These elements were hidden with `display: none;` by custom EUI styles,
+ // which caused problems when `minDate` or `maxDate` were configured: https://github.com/elastic/eui/issues/5058
+ // Keeping a reference for now, but we may opt for removing these
+ // elements entirely during https://github.com/elastic/eui/issues/3901
+ // if (!maxYear || !this.state.yearsList.find(year => year === maxYear)) {
+ // options.unshift(
+ //
+ // );
+ // }
+
+ // if (!minYear || !this.state.yearsList.find(year => year === minYear)) {
+ // options.push(
+ //
+ // );
+ // }
return options;
};
diff --git a/packages/react-datepicker/src/year_dropdown_options.jsx b/packages/react-datepicker/src/year_dropdown_options.jsx
index 4c48f700235..733b5d72816 100644
--- a/packages/react-datepicker/src/year_dropdown_options.jsx
+++ b/packages/react-datepicker/src/year_dropdown_options.jsx
@@ -108,31 +108,35 @@ export default class YearDropdownOptions extends React.Component {
const minYear = this.props.minDate ? this.props.minDate.year() : null;
const maxYear = this.props.maxDate ? this.props.maxDate.year() : null;
- if (!maxYear || !this.state.yearsList.find(year => year === maxYear)) {
- options.unshift(
-
- );
- }
-
- if (!minYear || !this.state.yearsList.find(year => year === minYear)) {
- options.push(
-
- );
- }
+ // These elements were hidden with `display: none;` by custom EUI styles,
+ // which caused problems when `minDate` or `maxDate` were configured: https://github.com/elastic/eui/issues/5058
+ // Keeping a reference for now, but we may opt for removing these
+ // elements entirely during https://github.com/elastic/eui/issues/3901
+ // if (!maxYear || !this.state.yearsList.find(year => year === maxYear)) {
+ // options.unshift(
+ //
+ // );
+ // }
+
+ // if (!minYear || !this.state.yearsList.find(year => year === minYear)) {
+ // options.push(
+ //
+ // );
+ // }
return options;
};
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 072b3bd5233..6732be7d630 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/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);
@@ -320,6 +323,27 @@ export const DatePickerExample = {
snippet: rangeSnippet,
props: { EuiDatePickerRange },
},
+ {
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: rangeRestrictedSource,
+ },
+ ],
+ text: (
+
+
+ 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.
+
+ ),
+ demo: ,
+ props: { EuiDatePickerRange },
+ },
{
title: 'Only allow specific dates and times',
source: [
diff --git a/src-docs/src/views/date_picker/range_restricted.js b/src-docs/src/views/date_picker/range_restricted.js
new file mode 100644
index 00000000000..37721e95b0b
--- /dev/null
+++ b/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 (
+
+ }
+ endDateControl={
+
+ }
+ />
+ );
+};
diff --git a/src/global_styling/react_date_picker/_date_picker.scss b/src/global_styling/react_date_picker/_date_picker.scss
index 8ee36693b24..cd3c799d083 100644
--- a/src/global_styling/react_date_picker/_date_picker.scss
+++ b/src/global_styling/react_date_picker/_date_picker.scss
@@ -560,13 +560,6 @@
justify-content: flex-end;
}
-.react-datepicker__year-option {
- &:first-of-type,
- &:last-of-type {
- display: none;
- }
-}
-
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss
index fbffbad2697..e52f16b37ed 100644
--- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss
+++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss
@@ -77,31 +77,25 @@
// Ranges use 2 side box-shadows that are the same as the button style
// to create a solid blue highlight, only rounded at the ends
- &--in-range:not(&--selected):not(:hover) {
+ &--in-range:not(&--selected):not(:hover),
+ &--in-range#{&}--disabled:not(.react-datepicker__day--selected),
+ &--in-range#{&}--disabled:not(.react-datepicker__day--selected):hover {
+ $backgroundColor: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
+
// sass-lint:disable-block indentation
- box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency),
- 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
+ box-shadow: -2px 0 $backgroundColor,
+ 2px 0 $backgroundColor;
border-radius: 0;
&:first-of-type {
- box-shadow: 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
+ box-shadow: 2px 0 $backgroundColor;
}
&:last-of-type {
- box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
+ box-shadow: -2px 0 $backgroundColor;
}
}
- &--in-range#{&}--range-start:not(&--selected) {
- border-top-left-radius: $euiBorderRadiusSmall;
- border-bottom-left-radius: $euiBorderRadiusSmall;
- }
-
- &--in-range#{&}--range-end:not(&--selected) {
- border-top-right-radius: $euiBorderRadiusSmall;
- border-bottom-right-radius: $euiBorderRadiusSmall;
- }
-
&--selected,
&--in-selecting-range,
&--selected:hover,
@@ -121,10 +115,19 @@
cursor: not-allowed;
text-decoration: none;
transform: none;
+
+ &.react-datepicker__day--in-range:not(.react-datepicker__day--selected),
+ &.react-datepicker__day--in-range:not(.react-datepicker__day--selected):hover {
+ $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorPrimary, 80%);
+ color: makeDisabledContrastColor($backgroundColorSimulated, $backgroundColorSimulated);
+ background-color: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
+ }
}
&--disabled.react-datepicker__day--selected,
&--disabled.react-datepicker__day--selected:hover {
- color: $euiTextColor;
+ $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiColorDanger, 80%);
+ color: makeDisabledContrastColor($euiColorDanger, $backgroundColorSimulated);
+ background-color: transparentize($euiColorDanger, $euiButtonDefaultTransparency);
}
}
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
index 9c79ebe05b5..9450f922119 100644
--- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
+++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
@@ -81,7 +81,8 @@
.react-datepicker__month-dropdown {
@include euiYScroll;
@include euiBottomShadowSmall;
- height: 250px; // Set an explicit height, something at least smaller than the overall height
+ height: auto;
+ max-height: 250px; // Set an explicit height, something at least smaller than the overall height
background-color: $euiColorEmptyShade;
position: absolute;
z-index: 1;
@@ -109,15 +110,6 @@
}
}
-// Hide the first and last options which trigger adding one more year to the list
-// But container no text or any content so its inaccessible
-.react-datepicker__year-option {
- &:first-of-type,
- &:last-of-type {
- display: none;
- }
-}
-
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {