diff --git a/docs-site/src/example_components.jsx b/docs-site/src/example_components.jsx index d77d77982..d4991d0d9 100644 --- a/docs-site/src/example_components.jsx +++ b/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: + }, + { + title: 'Disable date auto correction', + component: } ], diff --git a/docs-site/src/examples/disable_date_auto_correction.jsx b/docs-site/src/examples/disable_date_auto_correction.jsx new file mode 100644 index 000000000..94a9df8f1 --- /dev/null +++ b/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
+
+        
+          {'
+              {'disableDateAutoCorrection'}
+     {'selected={this.state.startDate}'}
+     {'onChange={this.handleChange} />'} +
+
+
+ +
+
+ } +}) diff --git a/src/date_input.jsx b/src/date_input.jsx index f0c134047..0fb90dfc4 100644 --- a/src/date_input.jsx +++ b/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, { diff --git a/src/datepicker.jsx b/src/datepicker.jsx index 149fa573d..86bdd98ab 100644 --- a/src/datepicker.jsx +++ b/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 ) 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( + + ) + 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 () {