fix(datepicker): correct minValue and maxValue displays and allow same date selection within Range (#415)

Author: Austin Green

packages/datepickers/examples/range.md

@@ -2,6 +2,12 @@
 const { Field, Label, Input, Message } = require('@zendeskgarden/react-forms/src');
 const { addDays, compareAsc } = require('date-fns');
 
+const StyledCol = styled(Col)`
+  && {
+    max-width: 300px;
+  }
+`;
+
 initialState = {
   startValue: new Date(),
   endValue: addDays(new Date(), 16)
@@ -16,15 +22,15 @@ const isInvalid = () => compareAsc(state.startValue, state.endValue) === 1;
 >
   <Grid>
     <Row>
-      <Col md>
+      <StyledCol md>
         <Field>
           <Label>Start</Label>
           <DatepickerRange.Start>
             <Input />
           </DatepickerRange.Start>
         </Field>
-      </Col>
-      <Col md>
+      </StyledCol>
+      <StyledCol md>
         <Field>
           <Label>End</Label>
           <DatepickerRange.End>
@@ -34,7 +40,7 @@ const isInvalid = () => compareAsc(state.startValue, state.endValue) === 1;
             <Message validation="error">End date must occur after the Start date</Message>
           )}
         </Field>
-      </Col>
+      </StyledCol>
     </Row>
     <Row>
       <Col>

packages/datepickers/src/Datepicker/Datepicker.spec.tsx

@@ -78,7 +78,7 @@ describe('Datepicker', () => {
       for (let x = 0; x < days.length; x++) {
         const element = days[x];
 
-        if (x < 6) {
+        if (x <= 6) {
           expect(element).toHaveAttribute('data-test-disabled', 'true');
         } else if (x > 11) {
           expect(element).toHaveAttribute('data-test-disabled', 'true');

packages/datepickers/src/Datepicker/components/Calendar.tsx

@@ -17,7 +17,6 @@ import isSameDay from 'date-fns/isSameDay';
 import isSameMonth from 'date-fns/isSameMonth';
 import isBefore from 'date-fns/isBefore';
 import isAfter from 'date-fns/isAfter';
-import subDays from 'date-fns/subDays';
 import {
   StyledDatepicker,
   StyledCalendar,
@@ -99,11 +98,11 @@ const Calendar: React.FunctionComponent<ICalendarProps> = ({
     let isDisabled = false;
 
     if (minValue !== undefined) {
-      isDisabled = isBefore(date, subDays(minValue, 1));
+      isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
     }
 
     if (maxValue !== undefined) {
-      isDisabled = isDisabled || isAfter(date, maxValue);
+      isDisabled = isDisabled || (isAfter(date, maxValue) && !isSameDay(date, maxValue));
     }
 
     return (

packages/datepickers/src/DatepickerRange/DatepickerRange.spec.tsx

@@ -188,7 +188,7 @@ describe('DatepickerRange', () => {
           startValue={DEFAULT_START_VALUE}
           endValue={DEFAULT_END_VALUE}
           minValue={subDays(DEFAULT_START_VALUE, 2)}
-          maxValue={addDays(DEFAULT_END_VALUE, 2)}
+          maxValue={addDays(DEFAULT_END_VALUE, 1)}
         />
       );
 
@@ -200,9 +200,9 @@ describe('DatepickerRange', () => {
 
         if (x < 5) {
           expect(element).not.toHaveAttribute('data-test-disabled');
-        } else if (x === 5) {
+        } else if (x < 7) {
           expect(element).toHaveAttribute('data-test-disabled', 'true');
-        } else if (x > 5 && x < 33) {
+        } else if (x >= 7 && x <= 32) {
           expect(element).toHaveAttribute('data-test-disabled', 'false');
         } else {
           expect(element).not.toHaveAttribute('data-test-disabled');
@@ -216,9 +216,9 @@ describe('DatepickerRange', () => {
 
         if (x < 5) {
           expect(element).not.toHaveAttribute('data-test-disabled');
-        } else if (x >= 5 && x < 12) {
+        } else if (x >= 5 && x < 11) {
           expect(element).toHaveAttribute('data-test-disabled', 'false');
-        } else if (x >= 12 && x < 36) {
+        } else if (x >= 11 && x < 36) {
           expect(element).toHaveAttribute('data-test-disabled', 'true');
         } else {
           expect(element).not.toHaveAttribute('data-test-disabled');

packages/datepickers/src/DatepickerRange/components/Month.tsx

@@ -152,11 +152,11 @@ const Month: React.FunctionComponent<{
     let isDisabled = false;
 
     if (minValue !== undefined) {
-      isDisabled = isBefore(date, subDays(minValue, 1));
+      isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
     }
 
     if (maxValue !== undefined) {
-      isDisabled = isDisabled || isAfter(date, maxValue);
+      isDisabled = isDisabled || (isAfter(date, maxValue) && !isSameDay(date, maxValue));
     }
 
     let isHighlighted = false;
@@ -180,10 +180,7 @@ const Month: React.FunctionComponent<{
       false;
 
     let isInvalidDateRange =
-      (endValue &&
-        startValue &&
-        (compareAsc(endValue, startValue) === -1 || compareAsc(endValue, startValue) === 0)) ||
-      false;
+      (endValue && startValue && compareAsc(endValue, startValue) === -1) || false;
 
     if (minValue) {
       if (startValue) {

packages/datepickers/src/DatepickerRange/utils/datepicker-range-reducer.ts

@@ -239,13 +239,19 @@ export const datepickerRangeReducer = ({
     }
     case 'CLICK_DATE':
       if (state.isStartFocused) {
-        if (endValue !== undefined && isBefore(action.value, endValue)) {
+        if (
+          endValue !== undefined &&
+          (isBefore(action.value, endValue) || isSameDay(action.value, endValue))
+        ) {
           onChange && onChange({ startValue: action.value, endValue });
         } else {
           onChange && onChange({ startValue: action.value, endValue: undefined });
         }
       } else if (state.isEndFocused) {
-        if (startValue !== undefined && isAfter(action.value, startValue)) {
+        if (
+          startValue !== undefined &&
+          (isAfter(action.value, startValue) || isSameDay(action.value, startValue))
+        ) {
           onChange && onChange({ startValue, endValue: action.value });
         } else {
           onChange && onChange({ startValue: action.value, endValue: undefined });