react-day-picker - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

dist/DayPicker.js

@@ -1,219 +0,295 @@
-"use strict";
+'use strict';
 
-var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };
+var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
 
-var React = _interopRequire(require("react"));
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
 
-var moment = _interopRequire(require("moment"));
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-var weeks = require("./utils").weeks;
+var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
-var DayPicker = React.createClass({
-  displayName: "DayPicker",
+var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 
-  propTypes: {
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
-    enableOutsideDays: React.PropTypes.bool,
+var _React$Component$PropTypes = require('react');
 
-    initialMonth: React.PropTypes.object, // default is current month
-    modifiers: React.PropTypes.object,
+var _React$Component$PropTypes2 = _interopRequireWildcard(_React$Component$PropTypes);
 
-    onDayClick: React.PropTypes.func,
-    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin
-    onDayMouseEnter: React.PropTypes.func,
-    onDayMouseLeave: React.PropTypes.func,
+var _moment = require('moment');
 
-    onNextMonthClick: React.PropTypes.func,
-    onPrevMonthClick: React.PropTypes.func
+var _moment2 = _interopRequireWildcard(_moment);
 
-  },
+var _weeks = require('./CalendarUtils');
 
-  getDefaultProps: function getDefaultProps() {
-    return { initialMonth: moment(), enableOutsideDays: false };
-  },
+var DayPicker = (function (_Component) {
+  function DayPicker(props) {
+    _classCallCheck(this, DayPicker);
 
-  getInitialState: function getInitialState() {
-    return { month: this.props.initialMonth.clone() };
-  },
+    _get(Object.getPrototypeOf(DayPicker.prototype), 'constructor', this).call(this, props);
+    this.state = {
+      month: this.props.initialMonth.clone()
+    };
+  }
 
-  handleDayTouchTap: function handleDayTouchTap(day, modifiers, e) {
-    if (this.props.onDayTouchTap) {
-      this.props.onDayTouchTap(day, modifiers, e);
-    }
-  },
+  _inherits(DayPicker, _Component);
 
-  handleDayClick: function handleDayClick(day, modifiers, e) {
-    if (this.props.onDayClick) {
-      this.props.onDayClick(day, modifiers, e);
+  _createClass(DayPicker, [{
+    key: 'handleDayTouchTap',
+    value: function handleDayTouchTap(day, modifiers, e) {
+      if (this.props.onDayTouchTap) {
+        this.props.onDayTouchTap(day, modifiers, e);
+      }
     }
-  },
+  }, {
+    key: 'handleDayClick',
+    value: function handleDayClick(day, modifiers, e) {
+      if (this.props.onDayClick) {
+        this.props.onDayClick(day, modifiers, e);
+      }
+    }
+  }, {
+    key: 'handleDayMouseEnter',
+    value: function handleDayMouseEnter(day, modifiers, e) {
+      if (this.props.onDayMouseEnter) {
+        this.props.onDayMouseEnter(day, modifiers, e);
+      }
+    }
+  }, {
+    key: 'handleDayMouseLeave',
+    value: function handleDayMouseLeave(day, modifiers, e) {
+      if (this.props.onDayMouseLeave) {
+        this.props.onDayMouseLeave(day, modifiers, e);
+      }
+    }
+  }, {
+    key: 'handleNextMonthClick',
+    value: function handleNextMonthClick(e) {
+      var _this = this;
 
-  handleDayMouseEnter: function handleDayMouseEnter(day, modifiers, e) {
-    if (this.props.onDayMouseEnter) {
-      this.props.onDayMouseEnter(day, modifiers, e);
+      var month = this.state.month;
+
+      var nextMonth = month.clone().add(1, 'month');
+      this.setState({ month: nextMonth }, function () {
+        if (_this.props.onNextMonthClick) {
+          _this.props.onNextMonthClick(_this.state.month, e);
+        }
+      });
     }
-  },
+  }, {
+    key: 'handlePrevMonthClick',
+    value: function handlePrevMonthClick(e) {
+      var _this2 = this;
 
-  handleDayMouseLeave: function handleDayMouseLeave(day, modifiers, e) {
-    if (this.props.onDayMouseLeave) {
-      this.props.onDayMouseLeave(day, modifiers, e);
+      var month = this.state.month;
+
+      var prevMonth = month.clone().subtract(1, 'month');
+      this.setState({ month: prevMonth }, function () {
+        if (_this2.props.onPrevMonthClick) {
+          _this2.props.onPrevMonthClick(_this2.state.month, e);
+        }
+      });
     }
-  },
+  }, {
+    key: 'getModifiersForDay',
+    value: function getModifiersForDay(day) {
+      var modifiers = this.props.modifiers;
 
-  handleNextMonthClick: function handleNextMonthClick(e) {
-    var _this = this;
+      var dayModifiers = [];
 
-    var month = this.state.month;
+      if (modifiers) {
+        for (var modifier in modifiers) {
+          var func = modifiers[modifier];
 
-    var nextMonth = month.clone().add(1, "month");
-    this.setState({ month: nextMonth }, function () {
-      if (_this.props.onNextMonthClick) {
-        _this.props.onNextMonthClick(_this.state.month, e);
+          if (func(day)) {
+            dayModifiers.push(modifier);
+          }
+        }
       }
-    });
-  },
 
-  handlePrevMonthClick: function handlePrevMonthClick(e) {
-    var _this = this;
+      return dayModifiers;
+    }
+  }, {
+    key: 'showMonth',
+    value: function showMonth(month) {
+      this.setState({ month: month });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var month = this.state.month;
 
-    var month = this.state.month;
-
-    var prevMonth = month.clone().subtract(1, "month");
-    this.setState({ month: prevMonth }, function () {
-      if (_this.props.onPrevMonthClick) {
-        _this.props.onPrevMonthClick(_this.state.month, e);
+      var months = [];
+      for (var i = 0; i < this.props.numberOfMonths; i++) {
+        months.push(this.renderMonth(month, i));
+        month = month.clone().add(1, 'month');
       }
-    });
-  },
 
-  getModifiersForDay: function getModifiersForDay(day) {
-    var modifiers = this.props.modifiers;
+      return _React$Component$PropTypes2['default'].createElement(
+        'div',
+        null,
+        months
+      );
+    }
+  }, {
+    key: 'renderMonth',
+    value: function renderMonth(month, monthIndex) {
+      var isFirstMonth = month === this.state.month;
+      var isLastMonth = monthIndex === this.props.numberOfMonths - 1;
+      return _React$Component$PropTypes2['default'].createElement(
+        'table',
+        { key: monthIndex, className: 'DayPicker' },
+        _React$Component$PropTypes2['default'].createElement(
+          'caption',
+          { className: 'DayPicker-caption' },
+          isFirstMonth && this.renderNavButton('left'),
+          month.format('MMMM YYYY'),
+          isLastMonth && this.renderNavButton('right')
+        ),
+        _React$Component$PropTypes2['default'].createElement(
+          'thead',
+          null,
+          this.renderWeekHeader()
+        ),
+        _React$Component$PropTypes2['default'].createElement(
+          'tbody',
+          null,
+          this.renderWeeks(month)
+        )
+      );
+    }
+  }, {
+    key: 'renderNavButton',
+    value: function renderNavButton(position) {
+      var className = 'DayPicker-nav DayPicker-nav--' + position;
+      var handler = position === 'left' ? this.handlePrevMonthClick : this.handleNextMonthClick;
 
-    var dayModifiers = [];
-    if (modifiers) {
-      for (var modifier in modifiers) {
-        var func = modifiers[modifier];
-        if (func(day)) {
-          dayModifiers.push(modifier);
-        }
+      return _React$Component$PropTypes2['default'].createElement('span', { ref: 'btn-' + position, className: className,
+        style: { float: position }, onClick: handler.bind(this) });
+    }
+  }, {
+    key: 'renderWeeks',
+    value: function renderWeeks(month) {
+      var _this3 = this;
+
+      return _weeks.weeks(month).map(function (week, i) {
+        return _React$Component$PropTypes2['default'].createElement(
+          'tr',
+          { key: i, className: 'DayPicker-week' },
+          _this3.renderDays(week)
+        );
+      });
+    }
+  }, {
+    key: 'renderWeekHeader',
+    value: function renderWeekHeader() {
+      var header = [];
+      for (var i = 0; i < 7; i++) {
+        header.push(_React$Component$PropTypes2['default'].createElement(
+          'th',
+          { key: i, className: 'DayPicker-weekday' },
+          _moment2['default']().weekday(i).format('dd')
+        ));
       }
+
+      return header;
     }
-    return dayModifiers;
-  },
+  }, {
+    key: 'renderDays',
+    value: function renderDays(week) {
+      var _this4 = this;
 
-  showMonth: function showMonth(month) {
-    this.setState({ month: month });
-  },
+      var firstDay = week[0];
+      var lastDay = week[week.length - 1];
 
-  render: function render() {
-    var month = this.state.month;
+      var days = week.map(function (day) {
+        return _this4.renderDay(day);
+      });
 
-    return React.createElement(
-      "table",
-      { className: "DayPicker" },
-      React.createElement(
-        "caption",
-        { className: "DayPicker-caption" },
-        this.renderNavButton("left"),
-        month.format("MMMM YYYY"),
-        this.renderNavButton("right")
-      ),
-      React.createElement(
-        "thead",
-        null,
-        this.renderWeekHeader()
-      ),
-      React.createElement(
-        "tbody",
-        null,
-        this.renderWeeks()
-      )
-    );
-  },
+      // days belonging to the previous month
+      for (var i = 0; i < firstDay.weekday(); i++) {
+        var prevDay = firstDay.clone().subtract(i + 1, 'day');
+        days.unshift(this.renderDay(prevDay, true));
+      }
 
-  renderNavButton: function renderNavButton(position) {
-    var className = "DayPicker-nav DayPicker-nav--" + position;
-    var handler = position === "left" ? this.handlePrevMonthClick : this.handleNextMonthClick;
+      // days belonging to the next month
+      for (var j = lastDay.weekday() + 1, count = 1; j < 7; j++, count++) {
+        var nextDay = lastDay.clone().add(count, 'day');
+        days.push(this.renderDay(nextDay, true));
+      }
 
-    return React.createElement("span", { ref: "btn-" + position, className: className,
-      style: { float: position }, onClick: handler });
-  },
+      return days;
+    }
+  }, {
+    key: 'renderDay',
+    value: function renderDay(day, outside) {
+      var key = '' + day.dayOfYear();
+      var className = 'DayPicker-day';
 
-  renderWeeks: function renderWeeks() {
-    var _this = this;
+      if (outside) {
+        className += ' DayPicker-day--outside';
+      }
 
-    return weeks(this.state.month).map(function (week, i) {
-      return React.createElement(
-        "tr",
-        { key: i, className: "DayPicker-week" },
-        _this.renderDays(week)
-      );
-    });
-  },
-
-  renderWeekHeader: function renderWeekHeader() {
-    var header = [];
-    for (var i = 0; i < 7; i++) {
-      header.push(React.createElement(
-        "th",
-        { key: i, className: "DayPicker-weekday" },
-        moment().weekday(i).format("dd")
-      ));
+      if (outside && !this.props.enableOutsideDays) {
+        return _React$Component$PropTypes2['default'].createElement('td', { className: className, ref: key, key: key });
+      } else {
+        var modifiers = this.getModifiersForDay(day);
+        className += modifiers.map(function (mod) {
+          return ' DayPicker-day--' + mod;
+        }).join('');
+        return _React$Component$PropTypes2['default'].createElement(
+          'td',
+          { ref: key, key: key,
+            className: className,
+            onMouseEnter: this.handleDayMouseEnter.bind(this, day, modifiers),
+            onMouseLeave: this.handleDayMouseLeave.bind(this, day, modifiers),
+            onTouchTap: this.handleDayTouchTap.bind(this, day, modifiers),
+            onClick: this.handleDayClick.bind(this, day, modifiers) },
+          day.format('D')
+        );
+      }
     }
-    return header;
-  },
+  }], [{
+    key: 'propTypes',
+    value: {
 
-  renderDays: function renderDays(week) {
-    var _this = this;
+      enableOutsideDays: _React$Component$PropTypes.PropTypes.bool,
 
-    var firstDay = week[0];
-    var lastDay = week[week.length - 1];
+      // default is current month
+      initialMonth: _React$Component$PropTypes.PropTypes.object,
 
-    var days = week.map(function (day) {
-      return _this.renderDay(day);
-    });
+      // default is 1
+      numberOfMonths: _React$Component$PropTypes.PropTypes.number,
 
-    // days belonging to the previous month
-    for (var i = 0; i < firstDay.weekday(); i++) {
-      var prevDay = firstDay.clone().subtract(i + 1, "day");
-      days.unshift(this.renderDay(prevDay, true));
-    }
+      modifiers: _React$Component$PropTypes.PropTypes.object,
 
-    // days belonging to the next month
-    for (var j = lastDay.weekday() + 1, count = 1; j < 7; j++, count++) {
-      var nextDay = lastDay.clone().add(count, "day");
-      days.push(this.renderDay(nextDay, true));
-    }
+      onDayClick: _React$Component$PropTypes.PropTypes.func,
 
-    return days;
-  },
+      // requires react-tap-event-plugin
+      onDayTouchTap: _React$Component$PropTypes.PropTypes.func,
 
-  renderDay: function renderDay(day, outside) {
-    var key = "" + day.dayOfYear();
-    var className = "DayPicker-day";
-    if (outside) {
-      className += " DayPicker-day--outside";
-    }
-    if (outside && !this.props.enableOutsideDays) {
-      return React.createElement("td", { className: className, ref: key, key: key });
-    } else {
-      var modifiers = this.getModifiersForDay(day);
-      className += modifiers.map(function (mod) {
-        return " DayPicker-day--" + mod;
-      }).join("");
-      return React.createElement(
-        "td",
-        { ref: key, key: key,
-          className: className,
-          onMouseEnter: this.handleDayMouseEnter.bind(this, day, modifiers),
-          onMouseLeave: this.handleDayMouseLeave.bind(this, day, modifiers),
-          onTouchTap: this.handleDayTouchTap.bind(this, day, modifiers),
-          onClick: this.handleDayClick.bind(this, day, modifiers) },
-        day.format("D")
-      );
-    }
-  }
+      onDayMouseEnter: _React$Component$PropTypes.PropTypes.func,
+      onDayMouseLeave: _React$Component$PropTypes.PropTypes.func,
 
-});
+      onNextMonthClick: _React$Component$PropTypes.PropTypes.func,
+      onPrevMonthClick: _React$Component$PropTypes.PropTypes.func
 
-module.exports = DayPicker;
+    },
+    enumerable: true
+  }, {
+    key: 'defaultProps',
+    value: {
+      initialMonth: _moment2['default'](),
+      numberOfMonths: 1,
+      enableOutsideDays: false
+    },
+    enumerable: true
+  }]);
+
+  return DayPicker;
+})(_React$Component$PropTypes.Component);
+
+exports['default'] = DayPicker;
+module.exports = exports['default'];

example/src/jsx/Page.jsx

@@ -19,3 +19,3 @@ import React from 'react';
 const Page = React.createClass({
-  
+
   getInitialState() {
@@ -31,8 +31,13 @@ return { value: dateToValue(moment()) };
     const value = e.target.value;
-    this.setState({value: value}, this.showMonthForCurrentValue);
+    this.setState({
+      value: value
+    }, this.showMonthForCurrentValue);
   },
 
   handleDayTouchTap(day, modifiers, e) {
-    if (modifiers.indexOf('disabled') === -1)
-      this.setState({ value: dateToValue(day) })
+    if (modifiers.indexOf('disabled') === -1) {
+      this.setState({
+        value: dateToValue(day)
+      });
+    }
   },
@@ -42,3 +47,7 @@
     const day = valueToDate(this.state.value);
-    if (!day) return;
+
+    if (!day) {
+      return;
+    }
+
     // if the current state is a valid day, show its month on the calendar
@@ -50,16 +59,19 @@ this.refs.daypicker.showMonth(day.startOf('month'));
     var modifiers = {
-      today: function (day) {
+      today: function(day) {
         return isSameDay(moment(), day);
       },
-      disabled: function (day) {
+      disabled: function(day) {
         // disable past days
         return day.diff(moment(), 'day') < 0;
       },
-      selected: function (day) {
+      selected: function(day) {
         const value = valueToDate(this.state.value);
-        if (modifiers.disabled(day) || !value) 
-          // value may be null if not a valid date 
+
+        if (modifiers.disabled(day) || !value) {
+          // value may be null if not a valid date
           return false;
-        else 
+        }
+        else {
           return isSameDay(value, day);
+        }
       }.bind(this)
@@ -74,23 +86,24 @@ };
       <div>
-        
+
         <h1>react-day-picker</h1>
 
         <p>
-          See project on <a href="https://github.com/gpbl/react-day-picker">github</a>.
+          See this project on <a href="https://github.com/gpbl/react-day-picker">github</a>.
         </p>
 
-        <input 
+        <input
           type="text"
           value={value}
-          placeholder="YYYY-MM-DD" 
+          placeholder="YYYY-MM-DD"
           onChange={this.handleInputChange}
           onFocus={this.handleInputFocus} />
-       
-        <DayPicker 
+
+        <DayPicker
           ref="daypicker"
           enableOutsideDays={true}
-          initialMonth={ valueToDate(value) || moment() } 
-          modifiers={ this.getModifiers() } 
+          initialMonth={ valueToDate(value) || moment() }
+          numberOfMonths={1}
+          modifiers={ this.getModifiers() }
           onDayTouchTap={this.handleDayTouchTap} />
-     
+
       </div>
@@ -102,2 +115,2 @@ );
 
-export default Page;
+export default Page;

package.json

 {
   "name": "react-day-picker",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Minimalistic date picker component for React and momentjs.",
@@ -39,5 +39,6 @@ "main": "./dist/DayPicker.js",
     "autoprefixer-loader": "^1.2.0",
-    "babel": "^4.7.16",
-    "babel-jest": "^4.0.0",
-    "babel-loader": "^4.2.0",
+    "babel": "^5.1.9",
+    "babel-core": "^5.1.9",
+    "babel-jest": "^5.0.1",
+    "babel-loader": "^5.0.0",
     "css-loader": "^0.9.1",
@@ -49,4 +50,4 @@ "jest-cli": "^0.4.0",
     "url-loader": "^0.5.5",
-    "webpack": "^1.7.3",
-    "webpack-dev-server": "^1.7.0"
+    "webpack": "^1.8.4",
+    "webpack-dev-server": "^1.8.0"
   },
@@ -53,0 +54,0 @@ "jest": {

README.md

@@ -30,3 +30,3 @@ # react-day-picker
 The following component implements the DayPicker and saves the selected day in its own `state`.
-It also adds the `daypicker__day--today` CSS modifier for today, and a `daypicker__day--selected` CSS modifier to the cell corresponding to the clicked/touched day.
+It also adds the `DayPicker-day--today` CSS modifier for today, and a `DayPicker-day--selected` CSS modifier to the cell corresponding to the clicked/touched day.
 
@@ -45,3 +45,5 @@ ```js
   handleDayTouchTap(day, modifiers, event) {
-    this.setState({ selectedDay: day });
+    this.setState({
+      selectedDay: day
+    });
   },
@@ -91,2 +93,3 @@
   initialMonth={Object}
+  numberOfMonths={Number}
   enableOutsideDays={Boolean}
@@ -105,10 +108,14 @@ modifiers={Object}
 
-A `moment()` object with the month to display in the calendar.
+A `moment()` object with the first month to display in the calendar.
 
+#### numberOfMonths `int`
+
+An integer value indicating the number of months to display in the calendar
+
 #### modifiers `Object`
 
-* The object's keys are the modifier's name – applied to each day, following a BEM-like syntax: `daypicker__day--<modifier>`
+* The object's keys are the modifier's name – applied to each day, following a BEM-like syntax: `DayPicker-day--<modifier>`
 * The key's values are functions evaluated for each day. When they returns `true`, the modifier is applied, and eventually passed to the `onDayTouchTap` payload.
 
-For example, the following modifiers will add the CSS class `daypicker__day--disabled` to the days of the past:
+For example, the following modifiers will add the CSS class `DayPicker-day--disabled` to the days of the past:
 
@@ -115,0 +122,0 @@ ```js

src/DayPicker.js

@@ -1,32 +0,45 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
-import { weeks } from './utils';
+import { weeks } from './CalendarUtils';
 
-const DayPicker = React.createClass({
+class DayPicker extends Component {
 
-  propTypes: {
+  static propTypes = {
 
-    enableOutsideDays: React.PropTypes.bool,
+    enableOutsideDays: PropTypes.bool,
 
-    initialMonth: React.PropTypes.object, // default is current month
-    modifiers: React.PropTypes.object,
+    // default is current month
+    initialMonth: PropTypes.object,
 
-    onDayClick: React.PropTypes.func,
-    onDayTouchTap: React.PropTypes.func, // requires react-tap-event-plugin
-    onDayMouseEnter: React.PropTypes.func,
-    onDayMouseLeave: React.PropTypes.func,
+    // default is 1
+    numberOfMonths: PropTypes.number,
 
-    onNextMonthClick: React.PropTypes.func,
-    onPrevMonthClick: React.PropTypes.func
+    modifiers: PropTypes.object,
 
-  },
+    onDayClick: PropTypes.func,
 
-  getDefaultProps() {
-    return { initialMonth: moment(), enableOutsideDays: false };
-  },
+    // requires react-tap-event-plugin
+    onDayTouchTap: PropTypes.func,
 
-  getInitialState() {
-    return { month: this.props.initialMonth.clone() };
-  },
+    onDayMouseEnter: PropTypes.func,
+    onDayMouseLeave: PropTypes.func,
 
+    onNextMonthClick: PropTypes.func,
+    onPrevMonthClick: PropTypes.func
+
+  }
+
+  static defaultProps = {
+    initialMonth: moment(),
+    numberOfMonths: 1,
+    enableOutsideDays: false
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      month: this.props.initialMonth.clone()
+    };
+  }
+
   handleDayTouchTap(day, modifiers, e) {
@@ -36,3 +49,3 @@ if (this.props.onDayTouchTap) {
     }
-  },
+  }
 
@@ -43,3 +56,3 @@ handleDayClick(day, modifiers, e) {
     }
-  },
+  }
 
@@ -50,3 +63,3 @@ handleDayMouseEnter(day, modifiers, e) {
     }
-  },
+  }
 
@@ -57,3 +70,3 @@ handleDayMouseLeave(day, modifiers, e) {
     }
-  },
+  }
 
@@ -68,3 +81,3 @@ handleNextMonthClick(e) {
     });
-  },
+  }
 
@@ -79,3 +92,3 @@ handlePrevMonthClick(e) {
     });
-  },
+  }
 
@@ -85,5 +98,7 @@ getModifiersForDay(day) {
     let dayModifiers = [];
+
     if (modifiers) {
       for (let modifier in modifiers) {
         let func = modifiers[modifier];
+
         if (func(day)) {
@@ -94,17 +109,35 @@ dayModifiers.push(modifier);
     }
+
     return dayModifiers;
-  },
+  }
 
   showMonth(month) {
     this.setState({month: month});
-  },
+  }
 
   render() {
-    const { month } = this.state;
+    let { month } = this.state;
+
+    let months = [];
+    for (let i = 0; i < this.props.numberOfMonths; i++) {
+      months.push(this.renderMonth(month, i));
+      month = month.clone().add(1, 'month');
+    }
+
     return (
-      <table className="DayPicker">
+      <div>
+        {months}
+      </div>
+    );
+  }
+
+  renderMonth(month, monthIndex) {
+    const isFirstMonth = (month === this.state.month);
+    const isLastMonth = (monthIndex === this.props.numberOfMonths - 1);
+    return (
+      <table key={monthIndex} className="DayPicker">
         <caption className="DayPicker-caption">
-          { this.renderNavButton('left') }
+          { isFirstMonth && this.renderNavButton('left') }
           { month.format('MMMM YYYY') }
-          { this.renderNavButton('right') }
+          { isLastMonth && this.renderNavButton('right') }
         </caption>
@@ -115,7 +148,7 @@ <thead>
         <tbody>
-          { this.renderWeeks() }
+          { this.renderWeeks(month) }
         </tbody>
       </table>
     );
-  },
+  }
 
@@ -128,8 +161,8 @@ renderNavButton(position) {
 
-    return <span ref={"btn-"+position} className={className}
-      style={{float: position}} onClick={handler} />;
-  },
+    return <span ref={"btn-" + position} className={className}
+      style={{float: position}} onClick={handler.bind(this)} />;
+  }
 
-  renderWeeks() {
-    return weeks(this.state.month).map((week, i) =>
+  renderWeeks(month) {
+    return weeks(month).map((week, i) =>
       <tr key={i} className="DayPicker-week">
@@ -139,3 +172,3 @@ { this.renderDays(week) }
     );
-  },
+  }
 
@@ -151,8 +184,9 @@ renderWeekHeader() {
     }
+
     return header;
-  },
+  }
 
   renderDays(week) {
     const firstDay = week[0];
-    const lastDay = week[week.length-1];
+    const lastDay = week[week.length - 1];
 
@@ -163,3 +197,3 @@ let days = week.map(day => this.renderDay(day));
     for (let i = 0; i < firstDay.weekday(); i++) {
-      const prevDay = firstDay.clone().subtract(i+1, 'day');
+      const prevDay = firstDay.clone().subtract(i + 1, 'day');
       days.unshift(this.renderDay(prevDay, true));
@@ -175,3 +209,3 @@ }
     return days;
-  },
+  }
 
@@ -181,5 +215,7 @@ renderDay(day, outside) {
     let className = 'DayPicker-day';
+
     if (outside) {
       className += ' DayPicker-day--outside';
     }
+
     if (outside && !this.props.enableOutsideDays) {
@@ -204,4 +240,4 @@ return <td className={className} ref={key} key={key} />;
 
-});
+}
 
 export default DayPicker;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

419312

increased by1.94%

Number of package files

25

increased by13.64%

Lines of code

1939

increased by7.6%

Number of lines in readme file

163

increased by4.49%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes