fix(datepicker): Add max and min attributes to date input (#2808)

* fix(datepicker): Add max and min attributes to date input

* fix(datepicker): Default max and min attributes

* fix(datepicker): Add unit tests for max and min attributes

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: tjuanitas

src/__mocks__/pikaday.js

@@ -2,6 +2,7 @@ const setDate = jest.fn();
 
 const Pikaday = jest.fn().mockImplementation(() => {
     return {
+        el: document.createElement('div'),
         getDate: () => {},
         gotoDate: () => {},
         setDate,

src/components/date-picker/DatePicker.tsx

@@ -671,6 +671,8 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
             isRequired,
             isTextInputAllowed,
             label,
+            maxDate,
+            minDate,
             name,
             onFocus,
             placeholder,
@@ -706,6 +708,7 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
         } else {
             valueAttr = { value: this.formatDisplay(value) };
         }
+
         let onChangeAttr;
         if (isAccessible && this.canUseDateInputType) {
             onChangeAttr = { onChange: this.handleOnChange };
@@ -717,13 +720,20 @@ class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
             onChangeAttr = { onChange: noop };
         }
 
-        // "name" prop is required for pattern validation to be surfaced on form submit. See components/form-elements/form/Form.js
-        // "title" prop is shown during constraint validation as a description of the pattern
-        // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern#usability
-        const additionalAttrs =
-            isAccessible && !this.canUseDateInputType
-                ? { name, pattern: ISO_DATE_FORMAT_PATTERN.source, title: 'YYYY-MM-DD' }
-                : {};
+        let additionalAttrs;
+        if (isAccessible && this.canUseDateInputType) {
+            additionalAttrs = {
+                max: this.formatDisplayDateType(maxDate) || '9999-12-31',
+                min: this.formatDisplayDateType(minDate) || '0001-01-01',
+            };
+        } else if (isAccessible && !this.canUseDateInputType) {
+            // "name" prop is required for pattern validation to be surfaced on form submit. See components/form-elements/form/Form.js
+            // "title" prop is shown during constraint validation as a description of the pattern
+            // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern#usability
+            additionalAttrs = { name, pattern: ISO_DATE_FORMAT_PATTERN.source, title: 'YYYY-MM-DD' };
+        } else {
+            additionalAttrs = {};
+        }
 
         return (
             <div className={classes}>

src/components/date-picker/__tests__/DatePicker.test.tsx

@@ -159,6 +159,47 @@ describe('components/date-picker/DatePicker', () => {
         expect(wrapper.find('ClearBadge16').length).toEqual(0);
     });
 
+    test.each`
+        maxDate                            | minDate                            | maxAttr         | minAttr
+        ${new Date('2022-12-31T00:00:00')} | ${new Date('2022-01-01T00:00:00')} | ${'2022-12-31'} | ${'2022-01-01'}
+        ${null}                            | ${null}                            | ${'9999-12-31'} | ${'0001-01-01'}
+    `(
+        'should pass { max: $maxAttr, min: $minAttr } attributes to date picker input',
+        ({ maxDate, minDate, maxAttr, minAttr }) => {
+            const wrapper = getWrapper({
+                isAccessible: true,
+                maxDate,
+                minDate,
+            });
+
+            const dateInput = wrapper.find('.date-picker-input');
+            expect(dateInput.prop('max')).toEqual(maxAttr);
+            expect(dateInput.prop('min')).toEqual(minAttr);
+        },
+    );
+
+    test('should show alert icon when date value is after maximum date', () => {
+        const wrapper = getWrapper({
+            isAccessible: true,
+            maxDate: new Date('2021-12-31T00:00:00'),
+        });
+
+        expect(wrapper.find('Alert16').length).toEqual(0);
+        wrapper.find('.date-picker-input').simulate('change', { target: { value: '2022-01-01' } });
+        expect(wrapper.find('Alert16').length).toEqual(1);
+    });
+
+    test('should show alert icon when date value is before minimum date', () => {
+        const wrapper = getWrapper({
+            isAccessible: true,
+            minDate: new Date('2022-01-01T00:00:00'),
+        });
+
+        expect(wrapper.find('Alert16').length).toEqual(0);
+        wrapper.find('.date-picker-input').simulate('change', { target: { value: '2021-12-31' } });
+        expect(wrapper.find('Alert16').length).toEqual(1);
+    });
+
     test('should show tooltip when error exists', () => {
         const wrapper = mount(
             <DatePicker