Changes to support disabling auto correction of dates (Hacker0x01#769)

* Changes to support disabling auto correction of dates

* Added onChangeDate prop to unit test

Author: Greg Smith

docs-site/src/example_components.jsx

@@ -3,6 +3,7 @@ import hljs from 'highlight.js'
 import Default from './examples/default'
 import CodeExampleComponent from './code_example_component'
 
+import DisableDateAutoCorrection from './examples/disable_date_auto_correction'
 import CustomDateFormat from './examples/custom_date_format'
 import CustomClassName from './examples/custom_class_name'
 import CustomCalendarClassName from './examples/custom_calendar_class_name'
@@ -183,6 +184,10 @@ export default React.createClass({
     {
       title: 'Get raw input value on change',
       component: <RawChange/>
+    },
+    {
+      title: 'Disable date auto correction',
+      component: <DisableDateAutoCorrection />
     }
   ],
 

docs-site/src/examples/disable_date_auto_correction.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import moment from 'moment'
+import DatePicker from 'react-datepicker'
+
+export default React.createClass({
+  displayName: 'Disable Date Auto Correction',
+
+  getInitialState () {
+    return {
+      startDate: moment()
+    }
+  },
+
+  handleChange (date) {
+    this.setState({
+      startDate: date
+    })
+  },
+
+  render () {
+    return <div className="row">
+      <pre className="column example__code">
+        <code className="jsx">
+          {'<DatePicker'}<br />
+              <strong>{'disableDateAutoCorrection'}<br /></strong>
+              {'selected={this.state.startDate}'}<br />
+              {'onChange={this.handleChange} />'}
+        </code>
+      </pre>
+      <div className="column">
+        <DatePicker
+            disableDateAutoCorrection
+            selected={this.state.startDate}
+            onChange={this.handleChange} />
+      </div>
+    </div>
+  }
+})

src/date_input.jsx

@@ -13,6 +13,7 @@ var DateInput = React.createClass({
       React.PropTypes.array
     ]),
     disabled: React.PropTypes.bool,
+    disableDateAutoCorrection: React.PropTypes.bool,
     excludeDates: React.PropTypes.array,
     filterDate: React.PropTypes.func,
     includeDates: React.PropTypes.array,
@@ -27,7 +28,8 @@ var DateInput = React.createClass({
 
   getDefaultProps () {
     return {
-      dateFormat: 'L'
+      dateFormat: 'L',
+      disableDateAutoCorrection: false
     }
   },
 
@@ -42,9 +44,11 @@ var DateInput = React.createClass({
         !isSameUtcOffset(newProps.date, this.props.date) ||
           newProps.locale !== this.props.locale ||
           newProps.dateFormat !== this.props.dateFormat) {
-      this.setState({
-        value: this.safeDateFormat(newProps)
-      })
+      if (!this.props.disableDateAutoCorrection || (newProps.date && newProps.date.isValid())) {
+        this.setState({
+          value: this.safeDateFormat(newProps)
+        })
+      }
     }
   },
 
@@ -67,6 +71,8 @@ var DateInput = React.createClass({
         this.props.onChangeDate(date)
       } else if (value === '') {
         this.props.onChangeDate(null)
+      } else if (this.props.disableDateAutoCorrection && !date.isValid()) {
+        this.props.onChangeDate(null)
       }
     }
     this.setState({value})
@@ -79,9 +85,12 @@ var DateInput = React.createClass({
   },
 
   handleBlur (event) {
-    this.setState({
-      value: this.safeDateFormat(this.props)
-    })
+    let val = this.safeDateFormat(this.props)
+    if (!this.props.disableDateAutoCorrection || val !== '') {
+      this.setState({
+        value: val
+      })
+    }
     if (this.props.onBlur) {
       this.props.onBlur(event)
     }
@@ -92,7 +101,7 @@ var DateInput = React.createClass({
   },
 
   render () {
-    const { customInput, date, locale, minDate, maxDate, excludeDates, includeDates, filterDate, dateFormat, onChangeDate, onChangeRaw, ...rest } = this.props // eslint-disable-line no-unused-vars
+    const { customInput, date, disableDateAutoCorrection, locale, minDate, maxDate, excludeDates, includeDates, filterDate, dateFormat, onChangeDate, onChangeRaw, ...rest } = this.props // eslint-disable-line no-unused-vars
 
     if (customInput) {
       return React.cloneElement(customInput, {

src/datepicker.jsx

@@ -30,6 +30,7 @@ var DatePicker = React.createClass({
     ]),
     dateFormatCalendar: React.PropTypes.string,
     disabled: React.PropTypes.bool,
+    disableDateAutoCorrection: React.PropTypes.bool,
     disabledKeyboardNavigation: React.PropTypes.bool,
     dropdownMode: React.PropTypes.oneOf(['scroll', 'select']).isRequired,
     endDate: React.PropTypes.object,
@@ -84,6 +85,7 @@ var DatePicker = React.createClass({
       dateFormatCalendar: 'MMMM YYYY',
       onChange () {},
       disabled: false,
+      disableDateAutoCorrection: false,
       disabledKeyboardNavigation: false,
       dropdownMode: 'scroll',
       onFocus () {},
@@ -202,7 +204,7 @@ var DatePicker = React.createClass({
       return
     }
 
-    if (!isSameDay(this.props.selected, changedDate)) {
+    if (!isSameDay(this.props.selected, changedDate) || this.props.disableDateAutoCorrection) {
       if (changedDate !== null) {
         if (this.props.selected) {
           changedDate = moment(changedDate).set({
@@ -349,6 +351,7 @@ var DatePicker = React.createClass({
     })
     return <DateInput
         ref="input"
+        disableDateAutoCorrection={this.props.disableDateAutoCorrection}
         id={this.props.id}
         name={this.props.name}
         autoFocus={this.props.autoFocus}

test/date_input_test.js

@@ -271,7 +271,7 @@ describe('DateInput', function () {
     })
 
     it('should empty the input if no date selected and input is invalid', function () {
-      var dateInput = shallow(
+      var dateInput = mount(
         <DateInput />
       )
       var inputNode = dateInput.find('input')
@@ -284,6 +284,22 @@ describe('DateInput', function () {
       inputNode.simulate('blur')
       expect(inputNode.prop('value')).to.equal('')
     })
+
+    it('should leave invalid input when disableDateAutoCorrection is set', function () {
+      var onChangeDate = sinon.spy()
+      var dateInput = mount(
+        <DateInput disableDateAutoCorrection onChangeDate={onChangeDate} />
+      )
+      var inputNode = dateInput.find('input')
+      inputNode.simulate('change', {
+        isDefaultPrevented: () => false,
+        target: {
+          value: 'invalid'
+        }
+      })
+      inputNode.simulate('blur')
+      expect(inputNode.prop('value')).to.equal('invalid')
+    })
   })
 
   describe('localization', function () {