Issue 1937 | Pass invalid date string to date change handlers

examples/DateRangePickerWrapper.jsx

@@ -24,6 +24,7 @@ const propTypes = {
   stateDateWrapper: PropTypes.func,
   initialStartDate: momentPropTypes.momentObj,
   initialEndDate: momentPropTypes.momentObj,
+  onInvalidInput: PropTypes.func,
 
   ...omit(DateRangePickerShape, [
     'startDate',
@@ -40,6 +41,7 @@ const defaultProps = {
   autoFocusEndDate: false,
   initialStartDate: null,
   initialEndDate: null,
+  onInvalidInput: () => null,
 
   // input related props
   startDateId: START_DATE,
@@ -85,15 +87,15 @@ const defaultProps = {
   minimumNights: 1,
   enableOutsideDays: false,
   isDayBlocked: () => false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => false,
 
   // internationalization
   displayFormat: () => moment.localeData().longDateFormat('L'),
   monthFormat: 'MMMM YYYY',
   phrases: DateRangePickerPhrases,
 
-  stateDateWrapper: date => date,
+  stateDateWrapper: (date) => date,
 };
 
 class DateRangePickerWrapper extends React.Component {
@@ -117,12 +119,15 @@ class DateRangePickerWrapper extends React.Component {
     this.onFocusChange = this.onFocusChange.bind(this);
   }
 
-  onDatesChange({ startDate, endDate }) {
-    const { stateDateWrapper } = this.props;
+  onDatesChange({ startDate, endDate, invalidDateString }) {
+    const { onInvalidInput, stateDateWrapper } = this.props;
     this.setState({
       startDate: startDate && stateDateWrapper(startDate),
       endDate: endDate && stateDateWrapper(endDate),
     });
+    if (invalidDateString) {
+      onInvalidInput(invalidDateString);
+    }
   }
 
   onFocusChange(focusedInput) {
@@ -141,6 +146,7 @@ class DateRangePickerWrapper extends React.Component {
       'initialStartDate',
       'initialEndDate',
       'stateDateWrapper',
+      'onInvalidInput',
     ]);
 
     return (

examples/SingleDatePickerWrapper.jsx

@@ -15,6 +15,7 @@ const propTypes = {
   // example props for the demo
   autoFocus: PropTypes.bool,
   initialDate: momentPropTypes.momentObj,
+  onInvalidInput: PropTypes.func,
 
   ...omit(SingleDatePickerShape, [
     'date',
@@ -28,6 +29,7 @@ const defaultProps = {
   // example props for the demo
   autoFocus: false,
   initialDate: null,
+  onInvalidInput: () => null,
 
   // input related props
   id: 'date',
@@ -69,7 +71,7 @@ const defaultProps = {
   renderDayContents: null,
   enableOutsideDays: false,
   isDayBlocked: () => false,
-  isOutsideRange: day => !isInclusivelyAfterDay(day, moment()),
+  isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),
   isDayHighlighted: () => {},
 
   // internationalization props
@@ -90,8 +92,12 @@ class SingleDatePickerWrapper extends React.Component {
     this.onFocusChange = this.onFocusChange.bind(this);
   }
 
-  onDateChange(date) {
+  onDateChange(date, invalidDateString) {
+    const { onInvalidInput } = this.props;
     this.setState({ date });
+    if (invalidDateString) {
+      onInvalidInput(invalidDateString);
+    }
   }
 
   onFocusChange({ focused }) {
@@ -106,6 +112,7 @@ class SingleDatePickerWrapper extends React.Component {
     const props = omit(this.props, [
       'autoFocus',
       'initialDate',
+      'onInvalidInput',
     ]);
 
     return (

src/components/DateRangePickerInputController.jsx

@@ -187,6 +187,7 @@ export default class DateRangePickerInputController extends React.PureComponent
       onDatesChange({
         startDate,
         endDate: null,
+        invalidDateString: endDateString,
       });
     }
   }
@@ -238,6 +239,7 @@ export default class DateRangePickerInputController extends React.PureComponent
       onDatesChange({
         startDate: null,
         endDate,
+        invalidDateString: startDateString,
       });
     }
   }

src/components/SingleDatePickerInputController.jsx

@@ -147,7 +147,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         onClose({ date: newDate });
       }
     } else {
-      onDateChange(null);
+      onDateChange(null, dateString);
     }
   }
 

stories/DateRangePicker_input.js

@@ -42,7 +42,9 @@ const TestCustomCloseIcon = () => (
       color: '#484848',
       padding: '3px',
     }}
-  >'X'</span>
+  >
+    'X'
+  </span>
 );
 
 storiesOf('DRP - Input Props', module)
@@ -64,16 +66,16 @@ storiesOf('DRP - Input Props', module)
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
       disabled="startDate"
-      isOutsideRange={day => !isInclusivelyAfterDay(day, moment().add(3, 'months'))}
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment().add(3, 'months'))}
     />
   )))
   .add('disabled end date', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'months')}
       initialEndDate={moment().add(3, 'months').add(10, 'days')}
       disabled="endDate"
-      isOutsideRange={day => !isInclusivelyAfterDay(day, moment()) ||
-        !isInclusivelyBeforeDay(day, moment().add(3, 'months').add(10, 'days'))}
+      isOutsideRange={(day) => !isInclusivelyAfterDay(day, moment())
+        || !isInclusivelyBeforeDay(day, moment().add(3, 'months').add(10, 'days'))}
     />
   )))
   .add('readOnly', withInfo()(() => (
@@ -179,4 +181,11 @@ storiesOf('DRP - Input Props', module)
       showClearDates
       regular
     />
+  )))
+  .add('handle invalid input', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'months')}
+      initialEndDate={moment().add(3, 'months').add(10, 'days')}
+      onInvalidInput={(input) => alert(`invalid date string: ${input}`)}
+    />
   )));

stories/SingleDatePicker_input.js

@@ -106,4 +106,10 @@ storiesOf('SDP - Input Props', module)
       showClearDate
       regular
     />
+  )))
+  .add('handle invalid input', withInfo()(() => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      onInvalidInput={(input) => alert(`invalid date string: ${input}`)}
+    />
   )));

test/components/DateRangePickerInputController_spec.jsx

@@ -386,6 +386,16 @@ describe('DateRangePickerInputController', () => {
         const args = onDatesChangeStub.getCall(0).args[0];
         expect(args.endDate).to.equal(null);
       });
+
+      it('calls props.onDatesChange with invalidDateString in arg object', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController onDatesChange={onDatesChangeStub} />
+        ));
+        wrapper.instance().onEndDateChange(invalidDateString);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.invalidDateString).to.equal(invalidDateString);
+      });
     });
 
     describe('is outside range', () => {
@@ -739,6 +749,19 @@ describe('DateRangePickerInputController', () => {
         expect(args.startDate).to.equal(null);
       });
 
+      it('calls props.onDatesChange with invalidDateString in arg object', () => {
+        const onDatesChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <DateRangePickerInputController
+            onDatesChange={onDatesChangeStub}
+            startDate={today}
+          />
+        ));
+        wrapper.instance().onStartDateChange(invalidDateString);
+        const args = onDatesChangeStub.getCall(0).args[0];
+        expect(args.invalidDateString).to.equal(invalidDateString);
+      });
+
       it('calls props.onDatesChange with endDate === props.endDate', () => {
         const onDatesChangeStub = sinon.stub();
         const wrapper = shallow((

test/components/SingleDatePickerInputController_spec.jsx

@@ -182,7 +182,7 @@ describe('SingleDatePickerInputController', () => {
         expect(onDateChangeStub.callCount).to.equal(1);
       });
 
-      it('calls props.onDateChange with null as arg', () => {
+      it('calls props.onDateChange with null as first arg', () => {
         const onDateChangeStub = sinon.stub();
         const wrapper = shallow((
           <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
@@ -191,6 +191,15 @@ describe('SingleDatePickerInputController', () => {
         expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
       });
 
+      it('calls props.onDateChange with invalid string as second arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController id="date" onDateChange={onDateChangeStub} onFocusChange={() => {}} />
+        ));
+        wrapper.instance().onChange(invalidDateString);
+        expect(onDateChangeStub.getCall(0).args[1]).to.equal(invalidDateString);
+      });
+
       it('does not call props.onFocusChange', () => {
         const onFocusChangeStub = sinon.stub();
         const wrapper = shallow((
@@ -219,7 +228,7 @@ describe('SingleDatePickerInputController', () => {
         expect(onDateChangeStub.callCount).to.equal(1);
       });
 
-      it('calls props.onDateChange with null as arg', () => {
+      it('calls props.onDateChange with null as first arg', () => {
         const onDateChangeStub = sinon.stub();
         const wrapper = shallow((
           <SingleDatePickerInputController
@@ -233,6 +242,20 @@ describe('SingleDatePickerInputController', () => {
         expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
       });
 
+      it('calls props.onDateChange with date string as second arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isOutsideRange={isOutsideRangeStub}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.getCall(0).args[1]).to.equal(todayDateString);
+      });
+
       it('does not call props.onFocusChange', () => {
         const onFocusChangeStub = sinon.stub();
         const wrapper = shallow((
@@ -266,7 +289,7 @@ describe('SingleDatePickerInputController', () => {
         expect(onDateChangeStub.callCount).to.equal(1);
       });
 
-      it('calls props.onDateChange with null as arg', () => {
+      it('calls props.onDateChange with null as first arg', () => {
         const onDateChangeStub = sinon.stub();
         const wrapper = shallow((
           <SingleDatePickerInputController
@@ -279,6 +302,20 @@ describe('SingleDatePickerInputController', () => {
         wrapper.instance().onChange(todayDateString);
         expect(onDateChangeStub.getCall(0).args[0]).to.equal(null);
       });
+
+      it('calls props.onDateChange with date string as second arg', () => {
+        const onDateChangeStub = sinon.stub();
+        const wrapper = shallow((
+          <SingleDatePickerInputController
+            id="date"
+            onDateChange={onDateChangeStub}
+            onFocusChange={() => {}}
+            isDayBlocked={isDayBlocked}
+          />
+        ));
+        wrapper.instance().onChange(todayDateString);
+        expect(onDateChangeStub.getCall(0).args[1]).to.equal(todayDateString);
+      });
     });
   });