diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index 2df54ebe..7abbdbc5 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']), // 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': { @@ -389,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() { @@ -406,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() { @@ -452,6 +458,7 @@ const DateRangePicker = React.createClass({ firstOfWeek, numberOfCalendars, selectionType, + showCurrentMonth, value, } = this.props; @@ -468,7 +475,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 () {