@gigwalk/react-bootstrap-datetimepicker/lib/DateTimePickerMonths.js

A bootstrap datetime picker component for React.js

"use strict";

var _get = require("babel-runtime/helpers/get")["default"];

var _inherits = require("babel-runtime/helpers/inherits")["default"];

var _createClass = require("babel-runtime/helpers/create-class")["default"];

var _classCallCheck = require("babel-runtime/helpers/class-call-check")["default"];

var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var DateTimePickerMonths = (function (_Component) {
  _inherits(DateTimePickerMonths, _Component);

  function DateTimePickerMonths() {
    var _this = this;

    _classCallCheck(this, DateTimePickerMonths);

    _get(Object.getPrototypeOf(DateTimePickerMonths.prototype), "constructor", this).apply(this, arguments);

    this.renderMonths = function () {
      var classes, i, month, months, monthsShort;
      month = _this.props.selectedDate.month();
      monthsShort = _moment2["default"].monthsShort();
      i = 0;
      months = [];
      while (i < 12) {
        classes = {
          month: true,
          "active": i === month && _this.props.viewDate.year() === _this.props.selectedDate.year()
        };
        months.push(_react2["default"].createElement(
          "span",
          { className: (0, _classnames2["default"])(classes), key: i, onClick: _this.props.setViewMonth },
          monthsShort[i]
        ));
        i++;
      }
      return months;
    };
  }

  _createClass(DateTimePickerMonths, [{
    key: "render",
    value: function render() {
      return _react2["default"].createElement(
        "div",
        { className: "datepicker-months", style: { display: "block" } },
        _react2["default"].createElement(
          "table",
          { className: "table-condensed" },
          _react2["default"].createElement(
            "thead",
            null,
            _react2["default"].createElement(
              "tr",
              null,
              _react2["default"].createElement(
                "th",
                { className: "prev", onClick: this.props.subtractYear },
                "‹"
              ),
              _react2["default"].createElement(
                "th",
                { className: "switch", colSpan: "5", onClick: this.props.showYears },
                this.props.viewDate.year()
              ),
              _react2["default"].createElement(
                "th",
                { className: "next", onClick: this.props.addYear },
                "›"
              )
            )
          ),
          _react2["default"].createElement(
            "tbody",
            null,
            _react2["default"].createElement(
              "tr",
              null,
              _react2["default"].createElement(
                "td",
                { colSpan: "7" },
                this.renderMonths()
              )
            )
          )
        )
      );
    }
  }], [{
    key: "propTypes",
    value: {
      subtractYear: _react.PropTypes.func.isRequired,
      addYear: _react.PropTypes.func.isRequired,
      viewDate: _react.PropTypes.object.isRequired,
      selectedDate: _react.PropTypes.object.isRequired,
      showYears: _react.PropTypes.func.isRequired,
      setViewMonth: _react.PropTypes.func.isRequired
    },
    enumerable: true
  }]);

  return DateTimePickerMonths;
})(_react.Component);

exports["default"] = DateTimePickerMonths;
module.exports = exports["default"];