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 () {