diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js
index 25bd9754e2..299d16a8d4 100644
--- a/src/DayPickerInput.js
+++ b/src/DayPickerInput.js
@@ -10,22 +10,21 @@ import { ESC } from './keys';
export const HIDE_TIMEOUT = 100;
function getStateFromProps(props) {
+ const { dayPickerProps, format, value } = props;
let month;
- if (props.value) {
- const m = moment(props.value, props.format, true);
+ if (value) {
+ const m = moment(value, format, true);
if (m.isValid()) {
month = m.toDate();
}
} else {
- month =
- props.dayPickerProps.initialMonth ||
- props.dayPickerProps.month ||
- new Date();
+ month = dayPickerProps.initialMonth || dayPickerProps.month || new Date();
}
return {
- value: props.value,
+ value,
month,
+ selectedDays: dayPickerProps.selectedDays,
};
}
@@ -255,7 +254,15 @@ export default class DayPickerInput extends React.Component {
}
if (modifiers.selected && this.props.clickUnselectsDay) {
// Unselect the day
- this.setState({ value: '' }, this.hideAfterDayClick);
+ let { selectedDays } = this.state;
+ if (Array.isArray(selectedDays)) {
+ selectedDays = selectedDays.slice(0);
+ const selectedDayIdx = selectedDays.indexOf(day);
+ selectedDays.splice(selectedDayIdx, 1);
+ } else if (moment(selectedDays).isValid()) {
+ selectedDays = null;
+ }
+ this.setState({ value: '', selectedDays }, this.hideAfterDayClick);
if (this.props.onDayChange) {
this.props.onDayChange(undefined, modifiers);
}
@@ -279,12 +286,16 @@ export default class DayPickerInput extends React.Component {
};
renderOverlay() {
+ const { format } = this.props;
+ const { selectedDays, value } = this.state;
let selectedDay;
- if (this.state.value) {
- const m = moment(this.state.value, this.props.format, true);
+ if (!selectedDays && value) {
+ const m = moment(value, format, true);
if (m.isValid()) {
selectedDay = m.toDate();
}
+ } else if (selectedDays) {
+ selectedDay = selectedDays;
}
return (
diff --git a/test/daypickerinput/events.js b/test/daypickerinput/events.js
index 79e1f3ded3..4dc0ab9269 100644
--- a/test/daypickerinput/events.js
+++ b/test/daypickerinput/events.js
@@ -265,6 +265,26 @@ describe('DayPickerInput', () => {
expect(wrapper.find('input')).toHaveProp('value', '');
expect(wrapper.find('.DayPicker-Day--selected')).toHaveLength(0);
});
+ it('should unselect the clicked day if already selected', () => {
+ const wrapper = mount(
+
+ );
+ wrapper.instance().showDayPicker();
+ wrapper.update();
+ wrapper
+ .find('.DayPicker-Day')
+ .at(10)
+ .simulate('click');
+ expect(wrapper.find('input')).toHaveProp('value', '');
+ expect(wrapper.find('.DayPicker-Day--selected')).toHaveLength(1);
+ });
it('should call `onDayChange` when clicking a selected day', () => {
const onDayChange = jest.fn();
const wrapper = mount(
@@ -310,6 +330,45 @@ describe('DayPickerInput', () => {
.simulate('click');
expect(onDayChange).not.toHaveBeenCalled();
});
+ it('should use `dayPickerProps.selectedDays` after clicking a day', () => {
+ const wrapper = mount(
+
+ );
+ wrapper.instance().showDayPicker();
+ wrapper.update();
+ wrapper
+ .find('.DayPicker-Day')
+ .at(9)
+ .simulate('click');
+ const selectedDays = wrapper.find('.DayPicker-Day--selected');
+ expect(selectedDays).toHaveLength(2);
+ expect(selectedDays.at(0)).toHaveText('8');
+ expect(selectedDays.at(1)).toHaveText('9');
+ });
+ it('should use `dayPickerProps.selectedDays` after typing a valid day', () => {
+ const wrapper = mount(
+
+ );
+ wrapper.instance().showDayPicker();
+ wrapper.update();
+ wrapper
+ .find('input')
+ .simulate('change', { target: { value: '02/07/2017' } });
+ const selectedDays = wrapper.find('.DayPicker-Day--selected');
+ expect(selectedDays).toHaveLength(2);
+ expect(selectedDays.at(0)).toHaveText('8');
+ expect(selectedDays.at(1)).toHaveText('9');
+ });
});
});
});