From 145ef677f950ba3a650b10fad429a20020befd22 Mon Sep 17 00:00:00 2001 From: Andy Wermke Date: Tue, 1 Nov 2016 15:15:14 +0100 Subject: [PATCH 1/3] May choose if CalendarMonths show past or future months (if more than one) --- src/DateRangePicker.jsx | 9 ++++++++- src/tests/DateRangePicker.spec.js | 25 +++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index 2df54ebe..3e0bb15c 100644 --- a/src/DateRangePicker.jsx +++ b/src/DateRangePicker.jsx @@ -53,6 +53,7 @@ const DateRangePicker = React.createClass({ selectedLabel: React.PropTypes.string, selectionType: React.PropTypes.oneOf(['single', 'range']), singleDateRange: React.PropTypes.bool, + showCurrentMonth: React.PropTypes.oneOf(['first', 'last']).isRequired, // if numberOfCalendars > 1 showLegend: React.PropTypes.bool, stateDefinitions: React.PropTypes.object, value: CustomPropTypes.momentOrMomentRange, @@ -75,6 +76,7 @@ const DateRangePicker = React.createClass({ initialFromValue: true, locale: moment().locale(), selectionType: 'range', + showCurrentMonth: 'first', singleDateRange: false, stateDefinitions: { '__default': { @@ -452,6 +454,7 @@ const DateRangePicker = React.createClass({ firstOfWeek, numberOfCalendars, selectionType, + showCurrentMonth, value, } = this.props; @@ -468,7 +471,11 @@ const DateRangePicker = React.createClass({ let key = `${ index}-${ year }-${ month }`; let props; - monthDate.add(index, 'months'); + if (showCurrentMonth === 'first') { + monthDate.add(index, 'months'); + } else { + monthDate.subtract(numberOfCalendars - index - 1, 'months'); + } let cal = new calendar.Calendar(firstOfWeek); let monthDates = Immutable.fromJS(cal.monthDates(monthDate.year(), monthDate.month())); diff --git a/src/tests/DateRangePicker.spec.js b/src/tests/DateRangePicker.spec.js index 94d3344c..bf7c736f 100644 --- a/src/tests/DateRangePicker.spec.js +++ b/src/tests/DateRangePicker.spec.js @@ -180,6 +180,31 @@ describe('The DateRangePicker component', function () { }); }); + describe('showing', function () { + var now = moment(); + var prevMonth = moment().subtract(1, 'months'); + var nextMonth = moment().add(1, 'months'); + + it('the current month in the left calendar by default', function () { + this.useShallowRenderer({ + numberOfCalendars: 2, + }); + var calendars = this.renderedComponent.props.children[1]; + expect(calendars[0].props.firstOfMonth.month()).toBe(now.month()); + expect(calendars[1].props.firstOfMonth.month()).toBe(nextMonth.month()); + }); + + it('the current month in the right calendar', function () { + this.useShallowRenderer({ + numberOfCalendars: 2, + showCurrentMonth: 'last', + }); + var calendars = this.renderedComponent.props.children[1]; + expect(calendars[0].props.firstOfMonth.month()).toBe(prevMonth.month()); + expect(calendars[1].props.firstOfMonth.month()).toBe(now.month()); + }); + }); + describe('for each component the value', function () { describe('when it is a moment', function () { From aa734277de9ca428f1315f7aefbc4c6c8494295f Mon Sep 17 00:00:00 2001 From: Andy Wermke Date: Tue, 1 Nov 2016 17:14:37 +0100 Subject: [PATCH 2/3] `showCurrentMonth` prop should not be required (there is a default value) --- src/DateRangePicker.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index 3e0bb15c..20c9ddf9 100644 --- a/src/DateRangePicker.jsx +++ b/src/DateRangePicker.jsx @@ -53,7 +53,7 @@ const DateRangePicker = React.createClass({ selectedLabel: React.PropTypes.string, selectionType: React.PropTypes.oneOf(['single', 'range']), singleDateRange: React.PropTypes.bool, - showCurrentMonth: React.PropTypes.oneOf(['first', 'last']).isRequired, // if numberOfCalendars > 1 + showCurrentMonth: React.PropTypes.oneOf(['first', 'last']), // if numberOfCalendars > 1 showLegend: React.PropTypes.bool, stateDefinitions: React.PropTypes.object, value: CustomPropTypes.momentOrMomentRange, From 5b6ff33242f9ecdc393c6d779c08e4f672d88975 Mon Sep 17 00:00:00 2001 From: Andy Wermke Date: Mon, 14 Nov 2016 12:47:57 +0100 Subject: [PATCH 3/3] Fix calendar pagination for `props.showCurrentMonth` !== 'first' --- src/DateRangePicker.jsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index 20c9ddf9..7abbdbc5 100644 --- a/src/DateRangePicker.jsx +++ b/src/DateRangePicker.jsx @@ -391,10 +391,12 @@ const DateRangePicker = React.createClass({ }, canMoveBack() { - if (this.getMonthDate().subtract(1, 'days').isBefore(this.state.enabledRange.start)) { - return false; - } - return true; + let { numberOfCalendars, showCurrentMonth } = this.props; + let firstVisibleMonthDate = showCurrentMonth === 'first' + ? this.getMonthDate() + : this.getMonthDate().subtract(numberOfCalendars - 1, 'months'); + + return !firstVisibleMonthDate.subtract(1, 'days').isBefore(this.state.enabledRange.start); }, moveBack() { @@ -408,10 +410,12 @@ const DateRangePicker = React.createClass({ }, canMoveForward() { - if (this.getMonthDate().add(this.props.numberOfCalendars, 'months').isAfter(this.state.enabledRange.end)) { - return false; - } - return true; + let { numberOfCalendars, showCurrentMonth } = this.props; + let lastVisibleMonthDate = showCurrentMonth === 'first' + ? this.getMonthDate().add(numberOfCalendars - 1, 'months') + : this.getMonthDate(); + + return !lastVisibleMonthDate.add(1, 'months').isAfter(this.state.enabledRange.end); }, moveForward() {