Merge pull request #119 from LukeAskew/daterangepicker-single-date

Allow DateRangePicker to have `minimumNights={0}`
react-dates · Oct 17, 2016 · aa09b09 · aa09b09
2 parents f90c119 + 8453a87
commit aa09b09
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -94,6 +94,7 @@ export default class DateRangePicker extends React.Component {
   }
 
   onDayClick(day, modifiers, e) {
+    const { minimumNights } = this.props;
     if (e) e.preventDefault();
     if (includes(modifiers, 'blocked')) return;
 
@@ -104,20 +105,22 @@ export default class DateRangePicker extends React.Component {
       this.props.onFocusChange(END_DATE);
 
       startDate = day;
+
       if (isInclusivelyAfterDay(day, endDate)) {
         endDate = null;
       }
     } else if (focusedInput === END_DATE) {
-      if (isInclusivelyBeforeDay(day, startDate)) {
+      const firstAllowedEndDate = startDate && startDate.clone().add(minimumNights, 'days');
+
+      if (!startDate) {
+        endDate = day;
+        this.props.onFocusChange(START_DATE);
+      } else if (isInclusivelyAfterDay(day, firstAllowedEndDate)) {
+        endDate = day;
+        this.props.onFocusChange(null);
+      } else {
         startDate = day;
         endDate = null;
-      } else {
-        endDate = day;
-        if (!startDate) {
-          this.props.onFocusChange(START_DATE);
-        } else {
-          this.props.onFocusChange(null);
-        }
       }
     }
 
@@ -268,9 +271,9 @@ export default class DateRangePicker extends React.Component {
   }
 
   isDayAfterHoveredStartDate(day) {
-    const { startDate, endDate } = this.props;
+    const { startDate, endDate, minimumNights } = this.props;
     const { hoverDate } = this.state;
-    return !!startDate && !endDate && isNextDay(hoverDate, day) &&
+    return !!startDate && !endDate && isNextDay(hoverDate, day) && minimumNights > 0 &&
       isSameDay(hoverDate, startDate);
   }
 

diff --git a/stories/DateRangePicker.js b/stories/DateRangePicker.js
@@ -99,6 +99,11 @@ storiesOf('DateRangePicker', module)
       minimumNights={3}
     />
   ))
+  .add('allows a single night', () => (
+    <DateRangePickerWrapper
+      minimumNights={0}
+    />
+  ))
   .add('allows previous three month only', () => (
     <DateRangePickerWrapper
       isOutsideRange={day =>

diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
@@ -393,6 +393,25 @@ describe('DateRangePicker', () => {
           });
         });
       });
+
+      describe('minimumNights is 0', () => {
+        it('calls props.onDatesChange with startDate === today and endDate === today',
+          () => {
+            const onDatesChangeStub = sinon.stub();
+            const wrapper = shallow(
+              <DateRangePicker
+                focusedInput={END_DATE}
+                minimumNights={0}
+                onDatesChange={onDatesChangeStub}
+                startDate={today}
+              />
+            );
+            wrapper.instance().onDayClick(today, []);
+            const args = onDatesChangeStub.getCall(0).args[0];
+            expect(args.startDate).to.equal(today);
+            expect(args.endDate).to.equal(today);
+          });
+      });
     });
   });
 
@@ -1077,6 +1096,15 @@ describe('DateRangePicker', () => {
         });
         expect(wrapper.instance().isDayAfterHoveredStartDate(testDate)).to.equal(false);
       });
+
+      it('returns false if arg is day after state.hoverDate and props.minimumNights is 0', () => {
+        const testDate = moment(today).add(1, 'days');
+        const wrapper = shallow(<DateRangePicker startDate={today} minimumNights={0} />);
+        wrapper.setState({
+          hoverDate: today,
+        });
+        expect(wrapper.instance().isDayAfterHoveredStartDate(testDate)).to.equal(false);
+      });
     });
 
     describe('#isEndDate', () => {