Added prop to show previous month (Hacker0x01#1913)

Author: keenubee

docs-site/src/components/Examples/index.js

@@ -50,6 +50,7 @@ import FixedCalendar from "../../examples/fixedCalendar";
 import WeekNumbers from "../../examples/weekNumbers";
 import CustomInput from "../../examples/customInput";
 import MultiMonth from "../../examples/multiMonth";
+import MultiMonthPrevious from "../../examples/multiMonthPrevious";
 import MultiMonthDropdown from "../../examples/multiMonthDropdown";
 import MultiMonthInline from "../../examples/multiMonthInline";
 import Children from "../../examples/children";
@@ -263,6 +264,10 @@ export default class exampleComponents extends React.Component {
       title: "Multiple months",
       component: MultiMonth
     },
+    {
+      title: "Show previous months",
+      component: MultiMonthPrevious
+    },
     {
       title: "Multiple months with year dropdown",
       component: MultiMonthDropdown

docs-site/src/examples/multiMonthPrevious.js

@@ -0,0 +1,11 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      showPreviousMonths
+      onChange={date => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};

src/calendar.jsx

@@ -106,6 +106,7 @@ export default class Calendar extends React.Component {
     selectsEnd: PropTypes.bool,
     selectsStart: PropTypes.bool,
     showMonthDropdown: PropTypes.bool,
+    showPreviousMonths: PropTypes.bool,
     showMonthYearDropdown: PropTypes.bool,
     showWeekNumbers: PropTypes.bool,
     showYearDropdown: PropTypes.bool,
@@ -605,9 +606,13 @@ export default class Calendar extends React.Component {
     }
 
     var monthList = [];
+    var monthsToSubtract = this.props.showPreviousMonths
+      ? this.props.monthsShown - 1
+      : 0;
+    var fromMonthDate = subMonths(this.state.date, monthsToSubtract);
     for (var i = 0; i < this.props.monthsShown; ++i) {
       var monthsToAdd = i - this.props.monthSelectedIn;
-      var monthDate = addMonths(this.state.date, monthsToAdd);
+      var monthDate = addMonths(fromMonthDate, monthsToAdd);
       var monthKey = `month-${i}`;
       monthList.push(
         <div

src/index.jsx

@@ -128,6 +128,7 @@ export default class DatePicker extends React.Component {
     selectsEnd: PropTypes.bool,
     selectsStart: PropTypes.bool,
     showMonthDropdown: PropTypes.bool,
+    showPreviousMonths: PropTypes.bool,
     showMonthYearDropdown: PropTypes.bool,
     showWeekNumbers: PropTypes.bool,
     showYearDropdown: PropTypes.bool,
@@ -198,6 +199,7 @@ export default class DatePicker extends React.Component {
       shouldCloseOnSelect: true,
       showTimeSelect: false,
       showTimeInput: false,
+      showPreviousMonths: false,
       showMonthYearPicker: false,
       showQuarterYearPicker: false,
       strictParsing: false,
@@ -654,6 +656,7 @@ export default class DatePicker extends React.Component {
         inline={this.props.inline}
         peekNextMonth={this.props.peekNextMonth}
         showMonthDropdown={this.props.showMonthDropdown}
+        showPreviousMonths={this.props.showPreviousMonths}
         useShortMonthInDropdown={this.props.useShortMonthInDropdown}
         showMonthYearDropdown={this.props.showMonthYearDropdown}
         showWeekNumbers={this.props.showWeekNumbers}

test/multi_month_test.js

@@ -2,6 +2,7 @@ import React from "react";
 import Calendar from "../src/calendar";
 import Month from "../src/month";
 import YearDropdown from "../src/year_dropdown";
+import * as utils from "../src/date_utils";
 import { shallow } from "enzyme";
 
 describe("Multi month calendar", function() {
@@ -31,4 +32,14 @@ describe("Multi month calendar", function() {
     var datepickers = calendar.find(YearDropdown);
     expect(datepickers).to.have.length(1);
   });
+
+  it("should render previous months", () => {
+    var calendar = getCalendar({ monthsShown: 2, showPreviousMonths: true });
+    var monthDate = calendar
+      .find(Month)
+      .first()
+      .prop("day");
+    var previousMonth = utils.subMonths(utils.newDate(), 1);
+    expect(utils.isSameMonth(previousMonth, monthDate)).to.be.true;
+  });
 });