multiple-react-datepicker - npm Package Compare versions

Comparing version 0.41.7 to 0.41.8

lib/calendar.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 _moment = require('moment');
@@ -32,6 +34,2 @@
 
-var _createReactClass = require('create-react-class');
-
-var _createReactClass2 = _interopRequireDefault(_createReactClass);
-
 var _classnames = require('classnames');
@@ -45,2 +43,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var DROPDOWN_FOCUS_CLASSNAMES = ['react-datepicker__year-select', 'react-datepicker__month-select'];
@@ -57,326 +61,348 @@
 
-exports.default = (0, _createReactClass2.default)({
-  displayName: 'Calendar',
+var Calendar = function (_Component) {
+  _inherits(Calendar, _Component);
 
-  propTypes: {
-    className: _propTypes2.default.string,
-    children: _propTypes2.default.node,
-    dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]).isRequired,
-    dropdownMode: _propTypes2.default.oneOf(['scroll', 'select']).isRequired,
-    endDate: _propTypes2.default.object,
-    excludeDates: _propTypes2.default.array,
-    filterDate: _propTypes2.default.func,
-    fixedHeight: _propTypes2.default.bool,
-    highlightDates: _propTypes2.default.array,
-    includeDates: _propTypes2.default.array,
-    inline: _propTypes2.default.bool,
-    locale: _propTypes2.default.string,
-    maxDate: _propTypes2.default.object,
-    minDate: _propTypes2.default.object,
-    monthsShown: _propTypes2.default.number,
-    onClickOutside: _propTypes2.default.func.isRequired,
-    onMonthChange: _propTypes2.default.func,
-    forceShowMonthNavigation: _propTypes2.default.bool,
-    onDropdownFocus: _propTypes2.default.func,
-    onSelect: _propTypes2.default.func.isRequired,
-    openToDate: _propTypes2.default.object,
-    peekNextMonth: _propTypes2.default.bool,
-    scrollableYearDropdown: _propTypes2.default.bool,
-    preSelection: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
-    selected: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
-    selectsEnd: _propTypes2.default.bool,
-    selectsStart: _propTypes2.default.bool,
-    showMonthDropdown: _propTypes2.default.bool,
-    showWeekNumbers: _propTypes2.default.bool,
-    showYearDropdown: _propTypes2.default.bool,
-    startDate: _propTypes2.default.object,
-    todayButton: _propTypes2.default.string,
-    utcOffset: _propTypes2.default.number
-  },
+  function Calendar(props) {
+    _classCallCheck(this, Calendar);
 
-  defaultProps: {
-    onDropdownFocus: function onDropdownFocus() {}
-  },
+    var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props));
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      utcOffset: _moment2.default.utc().utcOffset(),
-      monthsShown: 1,
-      forceShowMonthNavigation: false
+    _this.handleClickOutside = function (event) {
+      _this.props.onClickOutside(event);
     };
-  },
-  getInitialState: function getInitialState() {
-    return {
-      date: this.localizeMoment(this.getDateInView()),
-      selectingDate: null
+
+    _this.handleDropdownFocus = function (event) {
+      if (isDropdownSelect(event.target)) {
+        _this.props.onDropdownFocus();
+      }
     };
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    var preSelectDate = nextProps.preSelection;
-    if (preSelectDate && Array.isArray(preSelectDate)) {
-      preSelectDate = (0, _date_utils.getMinimumDate)(nextProps.preSelection);
-    }
-    if (preSelectDate && !(0, _date_utils.isSameDay)(preSelectDate, this.props.preSelection)) {
-      this.setState({
-        date: this.localizeMoment(preSelectDate)
+
+    _this.getDateInView = function () {
+      var _this$props = _this.props,
+          preSelection = _this$props.preSelection,
+          selected = _this$props.selected,
+          openToDate = _this$props.openToDate,
+          utcOffset = _this$props.utcOffset;
+
+      var minDate = (0, _date_utils.getEffectiveMinDate)(_this.props);
+      var maxDate = (0, _date_utils.getEffectiveMaxDate)(_this.props);
+      var current = _moment2.default.utc().utcOffset(utcOffset);
+      var initialDate = preSelection || selected;
+      if (initialDate) {
+        if (Array.isArray(initialDate)) {
+          return initialDate[0];
+        }
+        return initialDate;
+      } else if (minDate && maxDate && openToDate && openToDate.isBetween(minDate, maxDate)) {
+        return openToDate;
+      } else if (minDate && openToDate && openToDate.isAfter(minDate)) {
+        return openToDate;
+      } else if (minDate && minDate.isAfter(current)) {
+        return minDate;
+      } else if (maxDate && openToDate && openToDate.isBefore(maxDate)) {
+        return openToDate;
+      } else if (maxDate && maxDate.isBefore(current)) {
+        return maxDate;
+      } else if (openToDate) {
+        return openToDate;
+      } else {
+        return current;
+      }
+    };
+
+    _this.localizeMoment = function (date) {
+      if (!date) return (0, _moment2.default)();
+
+      if (Array.isArray(date)) {
+        date = (0, _date_utils.getMinimumDate)(date);
+        if (!date) return (0, _moment2.default)();
+      }
+      return date.clone().locale(_this.props.locale || _moment2.default.locale());
+    };
+
+    _this.increaseMonth = function () {
+      _this.setState({
+        date: _this.state.date.clone().add(1, 'month')
+      }, function () {
+        return _this.handleMonthChange(_this.state.date);
       });
-    } else if (nextProps.openToDate && !(0, _date_utils.isSameDay)(nextProps.openToDate, this.props.openToDate)) {
-      this.setState({
-        date: this.localizeMoment(nextProps.openToDate)
+    };
+
+    _this.decreaseMonth = function () {
+      _this.setState({
+        date: _this.state.date.clone().subtract(1, 'month')
+      }, function () {
+        return _this.handleMonthChange(_this.state.date);
       });
-    }
-  },
-  handleClickOutside: function handleClickOutside(event) {
-    this.props.onClickOutside(event);
-  },
-  handleDropdownFocus: function handleDropdownFocus(event) {
-    if (isDropdownSelect(event.target)) {
-      this.props.onDropdownFocus();
-    }
-  },
-  getDateInView: function getDateInView() {
-    var _props = this.props,
-        preSelection = _props.preSelection,
-        selected = _props.selected,
-        openToDate = _props.openToDate,
-        utcOffset = _props.utcOffset;
+    };
 
-    var minDate = (0, _date_utils.getEffectiveMinDate)(this.props);
-    var maxDate = (0, _date_utils.getEffectiveMaxDate)(this.props);
-    var current = _moment2.default.utc().utcOffset(utcOffset);
-    var initialDate = preSelection || selected;
-    if (initialDate) {
-      if (Array.isArray(initialDate)) {
-        return initialDate[0];
+    _this.handleDayClick = function (day, event) {
+      _this.props.onSelect(day, event);
+    };
+
+    _this.handleDayMouseEnter = function (day) {
+      _this.setState({ selectingDate: day });
+    };
+
+    _this.handleMonthMouseLeave = function () {
+      _this.setState({ selectingDate: null });
+    };
+
+    _this.handleMonthChange = function (date) {
+      if (_this.props.onMonthChange) {
+        _this.props.onMonthChange(date);
       }
-      return initialDate;
-    } else if (minDate && maxDate && openToDate && openToDate.isBetween(minDate, maxDate)) {
-      return openToDate;
-    } else if (minDate && openToDate && openToDate.isAfter(minDate)) {
-      return openToDate;
-    } else if (minDate && minDate.isAfter(current)) {
-      return minDate;
-    } else if (maxDate && openToDate && openToDate.isBefore(maxDate)) {
-      return openToDate;
-    } else if (maxDate && maxDate.isBefore(current)) {
-      return maxDate;
-    } else if (openToDate) {
-      return openToDate;
-    } else {
-      return current;
-    }
-  },
-  localizeMoment: function localizeMoment(date) {
-    if (!date) return (0, _moment2.default)();
+    };
 
-    if (Array.isArray(date)) {
-      date = (0, _date_utils.getMinimumDate)(date);
-      if (!date) return (0, _moment2.default)();
-    }
-    return date.clone().locale(this.props.locale || _moment2.default.locale());
-  },
-  increaseMonth: function increaseMonth() {
-    var _this = this;
+    _this.changeYear = function (year) {
+      _this.setState({
+        date: _this.state.date.clone().set('year', year)
+      });
+    };
 
-    this.setState({
-      date: this.state.date.clone().add(1, 'month')
-    }, function () {
-      return _this.handleMonthChange(_this.state.date);
-    });
-  },
-  decreaseMonth: function decreaseMonth() {
-    var _this2 = this;
+    _this.changeMonth = function (month) {
+      _this.setState({
+        date: _this.state.date.clone().set('month', month)
+      }, function () {
+        return _this.handleMonthChange(_this.state.date);
+      });
+    };
 
-    this.setState({
-      date: this.state.date.clone().subtract(1, 'month')
-    }, function () {
-      return _this2.handleMonthChange(_this2.state.date);
-    });
-  },
-  handleDayClick: function handleDayClick(day, event) {
-    this.props.onSelect(day, event);
-  },
-  handleDayMouseEnter: function handleDayMouseEnter(day) {
-    this.setState({ selectingDate: day });
-  },
-  handleMonthMouseLeave: function handleMonthMouseLeave() {
-    this.setState({ selectingDate: null });
-  },
-  handleMonthChange: function handleMonthChange(date) {
-    if (this.props.onMonthChange) {
-      this.props.onMonthChange(date);
-    }
-  },
-  changeYear: function changeYear(year) {
-    this.setState({
-      date: this.state.date.clone().set('year', year)
-    });
-  },
-  changeMonth: function changeMonth(month) {
-    var _this3 = this;
+    _this.header = function () {
+      var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.date;
 
-    this.setState({
-      date: this.state.date.clone().set('month', month)
-    }, function () {
-      return _this3.handleMonthChange(_this3.state.date);
-    });
-  },
-  header: function header() {
-    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.date;
+      var startOfWeek = date.clone().startOf('week');
+      var dayNames = [];
+      if (_this.props.showWeekNumbers) {
+        dayNames.push(_react2.default.createElement(
+          'div',
+          { key: 'W', className: 'react-datepicker__day-name' },
+          '#'
+        ));
+      }
+      return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map(function (offset) {
+        var day = startOfWeek.clone().add(offset, 'days');
+        return _react2.default.createElement(
+          'div',
+          { key: offset, className: 'react-datepicker__day-name' },
+          day.localeData().weekdaysMin(day)
+        );
+      }));
+    };
 
-    var startOfWeek = date.clone().startOf('week');
-    var dayNames = [];
-    if (this.props.showWeekNumbers) {
-      dayNames.push(_react2.default.createElement(
-        'div',
-        { key: 'W', className: 'react-datepicker__day-name' },
-        '#'
-      ));
-    }
-    return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map(function (offset) {
-      var day = startOfWeek.clone().add(offset, 'days');
+    _this.renderPreviousMonthButton = function () {
+      if (!_this.props.forceShowMonthNavigation && (0, _date_utils.allDaysDisabledBefore)(_this.state.date, 'month', _this.props)) {
+        return;
+      }
+      return _react2.default.createElement('a', {
+        className: 'react-datepicker__navigation react-datepicker__navigation--previous',
+        onClick: _this.decreaseMonth });
+    };
+
+    _this.renderNextMonthButton = function () {
+      if (!_this.props.forceShowMonthNavigation && (0, _date_utils.allDaysDisabledAfter)(_this.state.date, 'month', _this.props)) {
+        return;
+      }
+      return _react2.default.createElement('a', {
+        className: 'react-datepicker__navigation react-datepicker__navigation--next',
+        onClick: _this.increaseMonth });
+    };
+
+    _this.renderCurrentMonth = function () {
+      var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.date;
+
+      var classes = ['react-datepicker__current-month'];
+      if (_this.props.showYearDropdown) {
+        classes.push('react-datepicker__current-month--hasYearDropdown');
+      }
+      if (_this.props.showMonthDropdown) {
+        classes.push('react-datepicker__current-month--hasMonthDropdown');
+      }
       return _react2.default.createElement(
         'div',
-        { key: offset, className: 'react-datepicker__day-name' },
-        day.localeData().weekdaysMin(day)
+        { className: classes.join(' ') },
+        date.format(_this.props.dateFormat)
       );
-    }));
-  },
-  renderPreviousMonthButton: function renderPreviousMonthButton() {
-    if (!this.props.forceShowMonthNavigation && (0, _date_utils.allDaysDisabledBefore)(this.state.date, 'month', this.props)) {
-      return;
-    }
-    return _react2.default.createElement('a', {
-      className: 'react-datepicker__navigation react-datepicker__navigation--previous',
-      onClick: this.decreaseMonth });
-  },
-  renderNextMonthButton: function renderNextMonthButton() {
-    if (!this.props.forceShowMonthNavigation && (0, _date_utils.allDaysDisabledAfter)(this.state.date, 'month', this.props)) {
-      return;
-    }
-    return _react2.default.createElement('a', {
-      className: 'react-datepicker__navigation react-datepicker__navigation--next',
-      onClick: this.increaseMonth });
-  },
-  renderCurrentMonth: function renderCurrentMonth() {
-    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.date;
+    };
 
-    var classes = ['react-datepicker__current-month'];
-    if (this.props.showYearDropdown) {
-      classes.push('react-datepicker__current-month--hasYearDropdown');
-    }
-    if (this.props.showMonthDropdown) {
-      classes.push('react-datepicker__current-month--hasMonthDropdown');
-    }
-    return _react2.default.createElement(
-      'div',
-      { className: classes.join(' ') },
-      date.format(this.props.dateFormat)
-    );
-  },
-  renderYearDropdown: function renderYearDropdown() {
-    var overrideHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    _this.renderYearDropdown = function () {
+      var overrideHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-    if (!this.props.showYearDropdown || overrideHide) {
-      return;
-    }
-    return _react2.default.createElement(_year_dropdown2.default, {
-      dropdownMode: this.props.dropdownMode,
-      onChange: this.changeYear,
-      minDate: this.props.minDate,
-      maxDate: this.props.maxDate,
-      year: this.state.date.year(),
-      scrollableYearDropdown: this.props.scrollableYearDropdown });
-  },
-  renderMonthDropdown: function renderMonthDropdown() {
-    var overrideHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (!_this.props.showYearDropdown || overrideHide) {
+        return;
+      }
+      return _react2.default.createElement(_year_dropdown2.default, {
+        dropdownMode: _this.props.dropdownMode,
+        onChange: _this.changeYear,
+        minDate: _this.props.minDate,
+        maxDate: _this.props.maxDate,
+        year: _this.state.date.year(),
+        scrollableYearDropdown: _this.props.scrollableYearDropdown });
+    };
 
-    if (!this.props.showMonthDropdown) {
-      return;
-    }
-    return _react2.default.createElement(_month_dropdown2.default, {
-      dropdownMode: this.props.dropdownMode,
-      locale: this.props.locale,
-      onChange: this.changeMonth,
-      month: this.state.date.month() });
-  },
-  renderTodayButton: function renderTodayButton() {
-    var _this4 = this;
+    _this.renderMonthDropdown = function () {
+      var overrideHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-    if (!this.props.todayButton) {
-      return;
-    }
-    return _react2.default.createElement(
-      'div',
-      { className: 'react-datepicker__today-button', onClick: function onClick(event) {
-          return _this4.props.onSelect(_moment2.default.utc().utcOffset(_this4.props.utcOffset).startOf('date'), event);
-        } },
-      this.props.todayButton
-    );
-  },
-  renderMonths: function renderMonths() {
-    var monthList = [];
-    for (var i = 0; i < this.props.monthsShown; ++i) {
-      var monthDate = this.state.date.clone().add(i, 'M');
-      var monthKey = 'month-' + i;
-      monthList.push(_react2.default.createElement(
+      if (!_this.props.showMonthDropdown) {
+        return;
+      }
+      return _react2.default.createElement(_month_dropdown2.default, {
+        dropdownMode: _this.props.dropdownMode,
+        locale: _this.props.locale,
+        onChange: _this.changeMonth,
+        month: _this.state.date.month() });
+    };
+
+    _this.renderTodayButton = function () {
+      if (!_this.props.todayButton) {
+        return;
+      }
+      return _react2.default.createElement(
         'div',
-        { key: monthKey, className: 'react-datepicker__month-container' },
-        _react2.default.createElement(
+        { className: 'react-datepicker__today-button', onClick: function onClick(event) {
+            return _this.props.onSelect(_moment2.default.utc().utcOffset(_this.props.utcOffset).startOf('date'), event);
+          } },
+        _this.props.todayButton
+      );
+    };
+
+    _this.renderMonths = function () {
+      var monthList = [];
+      for (var i = 0; i < _this.props.monthsShown; ++i) {
+        var monthDate = _this.state.date.clone().add(i, 'M');
+        var monthKey = 'month-' + i;
+        monthList.push(_react2.default.createElement(
           'div',
-          { className: 'react-datepicker__header' },
-          this.renderCurrentMonth(monthDate),
+          { key: monthKey, className: 'react-datepicker__month-container' },
           _react2.default.createElement(
             'div',
-            {
-              className: 'react-datepicker__header__dropdown react-datepicker__header__dropdown--' + this.props.dropdownMode,
-              onFocus: this.handleDropdownFocus },
-            this.renderMonthDropdown(i !== 0),
-            this.renderYearDropdown(i !== 0)
+            { className: 'react-datepicker__header' },
+            _this.renderCurrentMonth(monthDate),
+            _react2.default.createElement(
+              'div',
+              {
+                className: 'react-datepicker__header__dropdown react-datepicker__header__dropdown--' + _this.props.dropdownMode,
+                onFocus: _this.handleDropdownFocus },
+              _this.renderMonthDropdown(i !== 0),
+              _this.renderYearDropdown(i !== 0)
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: 'react-datepicker__day-names' },
+              _this.header(monthDate)
+            )
           ),
-          _react2.default.createElement(
-            'div',
-            { className: 'react-datepicker__day-names' },
-            this.header(monthDate)
-          )
-        ),
-        _react2.default.createElement(_month2.default, {
-          day: monthDate,
-          onDayClick: this.handleDayClick,
-          onDayMouseEnter: this.handleDayMouseEnter,
-          onMouseLeave: this.handleMonthMouseLeave,
-          minDate: this.props.minDate,
-          maxDate: this.props.maxDate,
-          excludeDates: this.props.excludeDates,
-          highlightDates: this.props.highlightDates,
-          selectingDate: this.state.selectingDate,
-          includeDates: this.props.includeDates,
-          inline: this.props.inline,
-          fixedHeight: this.props.fixedHeight,
-          filterDate: this.props.filterDate,
-          preSelection: this.props.preSelection,
-          selected: this.props.selected,
-          selectsStart: this.props.selectsStart,
-          selectsEnd: this.props.selectsEnd,
-          showWeekNumbers: this.props.showWeekNumbers,
-          startDate: this.props.startDate,
-          endDate: this.props.endDate,
-          peekNextMonth: this.props.peekNextMonth,
-          utcOffset: this.props.utcOffset })
-      ));
+          _react2.default.createElement(_month2.default, {
+            day: monthDate,
+            onDayClick: _this.handleDayClick,
+            onDayMouseEnter: _this.handleDayMouseEnter,
+            onMouseLeave: _this.handleMonthMouseLeave,
+            minDate: _this.props.minDate,
+            maxDate: _this.props.maxDate,
+            excludeDates: _this.props.excludeDates,
+            highlightDates: _this.props.highlightDates,
+            selectingDate: _this.state.selectingDate,
+            includeDates: _this.props.includeDates,
+            inline: _this.props.inline,
+            fixedHeight: _this.props.fixedHeight,
+            filterDate: _this.props.filterDate,
+            preSelection: _this.props.preSelection,
+            selected: _this.props.selected,
+            selectsStart: _this.props.selectsStart,
+            selectsEnd: _this.props.selectsEnd,
+            showWeekNumbers: _this.props.showWeekNumbers,
+            startDate: _this.props.startDate,
+            endDate: _this.props.endDate,
+            peekNextMonth: _this.props.peekNextMonth,
+            utcOffset: _this.props.utcOffset })
+        ));
+      }
+      return monthList;
+    };
+
+    _this.state = {
+      date: _this.localizeMoment(_this.getDateInView()),
+      selectingDate: null
+    };
+    return _this;
+  }
+
+  _createClass(Calendar, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var preSelectDate = nextProps.preSelection;
+      if (preSelectDate && Array.isArray(preSelectDate)) {
+        preSelectDate = (0, _date_utils.getMinimumDate)(nextProps.preSelection);
+      }
+      if (preSelectDate && !(0, _date_utils.isSameDay)(preSelectDate, this.props.preSelection)) {
+        this.setState({
+          date: this.localizeMoment(preSelectDate)
+        });
+      } else if (nextProps.openToDate && !(0, _date_utils.isSameDay)(nextProps.openToDate, this.props.openToDate)) {
+        this.setState({
+          date: this.localizeMoment(nextProps.openToDate)
+        });
+      }
     }
-    return monthList;
-  },
-  render: function render() {
-    return _react2.default.createElement(
-      'div',
-      { className: (0, _classnames2.default)('react-datepicker', this.props.className) },
-      _react2.default.createElement('div', { className: 'react-datepicker__triangle' }),
-      this.renderPreviousMonthButton(),
-      this.renderNextMonthButton(),
-      this.renderMonths(),
-      this.renderTodayButton(),
-      this.props.children
-    );
-  }
-});
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)('react-datepicker', this.props.className) },
+        _react2.default.createElement('div', { className: 'react-datepicker__triangle' }),
+        this.renderPreviousMonthButton(),
+        this.renderNextMonthButton(),
+        this.renderMonths(),
+        this.renderTodayButton(),
+        this.props.children
+      );
+    }
+  }]);
+
+  return Calendar;
+}(_react.Component);
+
+Calendar.displayName = 'Calendar';
+Calendar.propTypes = {
+  className: _propTypes2.default.string,
+  children: _propTypes2.default.node,
+  dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]).isRequired,
+  dropdownMode: _propTypes2.default.oneOf(['scroll', 'select']).isRequired,
+  endDate: _propTypes2.default.object,
+  excludeDates: _propTypes2.default.array,
+  filterDate: _propTypes2.default.func,
+  fixedHeight: _propTypes2.default.bool,
+  highlightDates: _propTypes2.default.array,
+  includeDates: _propTypes2.default.array,
+  inline: _propTypes2.default.bool,
+  locale: _propTypes2.default.string,
+  maxDate: _propTypes2.default.object,
+  minDate: _propTypes2.default.object,
+  monthsShown: _propTypes2.default.number,
+  onClickOutside: _propTypes2.default.func.isRequired,
+  onMonthChange: _propTypes2.default.func,
+  forceShowMonthNavigation: _propTypes2.default.bool,
+  onDropdownFocus: _propTypes2.default.func,
+  onSelect: _propTypes2.default.func.isRequired,
+  openToDate: _propTypes2.default.object,
+  peekNextMonth: _propTypes2.default.bool,
+  scrollableYearDropdown: _propTypes2.default.bool,
+  preSelection: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
+  selected: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
+  selectsEnd: _propTypes2.default.bool,
+  selectsStart: _propTypes2.default.bool,
+  showMonthDropdown: _propTypes2.default.bool,
+  showWeekNumbers: _propTypes2.default.bool,
+  showYearDropdown: _propTypes2.default.bool,
+  startDate: _propTypes2.default.object,
+  todayButton: _propTypes2.default.string,
+  utcOffset: _propTypes2.default.number
+};
+Calendar.defaultProps = {
+  onDropdownFocus: function onDropdownFocus() {},
+  utcOffset: _moment2.default.utc().utcOffset(),
+  monthsShown: 1,
+  forceShowMonthNavigation: false
+};
+exports.default = Calendar;

lib/datepicker.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 _date_input = require('./date_input');
@@ -24,6 +26,2 @@
 
-var _createReactClass = require('create-react-class');
-
-var _createReactClass2 = _interopRequireDefault(_createReactClass);
-
 var _tether_component = require('./tether_component');
@@ -47,2 +45,6 @@
 
+var _map = require('lodash/map');
+
+var _map2 = _interopRequireDefault(_map);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,2 +54,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var outsideClickIgnoreClass = 'react-datepicker-ignore-onclickoutside';
@@ -60,92 +68,17 @@ var WrappedCalendar = (0, _reactOnclickoutside2.default)(_calendar2.default);
 
-exports.default = (0, _createReactClass2.default)({
-  displayName: 'DatePicker',
+var DatePicker = function (_Component) {
+  _inherits(DatePicker, _Component);
 
-  propTypes: {
-    autoComplete: _propTypes2.default.string,
-    autoFocus: _propTypes2.default.bool,
-    calendarClassName: _propTypes2.default.string,
-    children: _propTypes2.default.node,
-    className: _propTypes2.default.string,
-    customInput: _propTypes2.default.element,
-    dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
-    dateFormatCalendar: _propTypes2.default.string,
-    disabled: _propTypes2.default.bool,
-    disabledKeyboardNavigation: _propTypes2.default.bool,
-    dropdownMode: _propTypes2.default.oneOf(['scroll', 'select']).isRequired,
-    endDate: _propTypes2.default.object,
-    excludeDates: _propTypes2.default.array,
-    filterDate: _propTypes2.default.func,
-    fixedHeight: _propTypes2.default.bool,
-    highlightDates: _propTypes2.default.array,
-    id: _propTypes2.default.string,
-    includeDates: _propTypes2.default.array,
-    inline: _propTypes2.default.bool,
-    isClearable: _propTypes2.default.bool,
-    locale: _propTypes2.default.string,
-    maxDate: _propTypes2.default.object,
-    minDate: _propTypes2.default.object,
-    monthsShown: _propTypes2.default.number,
-    name: _propTypes2.default.string,
-    onBlur: _propTypes2.default.func,
-    onChange: _propTypes2.default.func.isRequired,
-    onChangeRaw: _propTypes2.default.func,
-    onFocus: _propTypes2.default.func,
-    onMonthChange: _propTypes2.default.func,
-    openToDate: _propTypes2.default.object,
-    peekNextMonth: _propTypes2.default.bool,
-    placeholderText: _propTypes2.default.string,
-    popoverAttachment: _propTypes2.default.string,
-    popoverTargetAttachment: _propTypes2.default.string,
-    popoverTargetOffset: _propTypes2.default.string,
-    readOnly: _propTypes2.default.bool,
-    renderCalendarTo: _propTypes2.default.any,
-    required: _propTypes2.default.bool,
-    scrollableYearDropdown: _propTypes2.default.bool,
-    selected: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
-    selectsEnd: _propTypes2.default.bool,
-    selectsStart: _propTypes2.default.bool,
-    showMonthDropdown: _propTypes2.default.bool,
-    showWeekNumbers: _propTypes2.default.bool,
-    showYearDropdown: _propTypes2.default.bool,
-    forceShowMonthNavigation: _propTypes2.default.bool,
-    startDate: _propTypes2.default.object,
-    tabIndex: _propTypes2.default.number,
-    tetherConstraints: _propTypes2.default.array,
-    title: _propTypes2.default.string,
-    todayButton: _propTypes2.default.string,
-    utcOffset: _propTypes2.default.number,
-    withPortal: _propTypes2.default.bool,
-    multipleSelect: _propTypes2.default.bool
-  },
+  function DatePicker(props) {
+    _classCallCheck(this, DatePicker);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      dateFormatCalendar: 'MMMM YYYY',
-      onChange: function onChange() {},
+    var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));
 
-      disabled: false,
-      disabledKeyboardNavigation: false,
-      dropdownMode: 'scroll',
-      onFocus: function onFocus() {},
-      onBlur: function onBlur() {},
-      onMonthChange: function onMonthChange() {},
+    _initialiseProps.call(_this);
 
-      popoverAttachment: 'top left',
-      popoverTargetAttachment: 'bottom left',
-      popoverTargetOffset: '10px 0',
-      tetherConstraints: [{
-        to: 'window',
-        attachment: 'together'
-      }],
-      utcOffset: (0, _moment2.default)().utcOffset(),
-      monthsShown: 1,
-      withPortal: false
-    };
-  },
-  getInitialState: function getInitialState() {
     var preSelection = void 0;
-    if (this.props.multipleSelect) {
-      if (Array.isArray(this.props.selected)) {
-        preSelection = this.props.selected.map(function (dateSelected) {
+
+    if (props.multipleSelect) {
+      if (Array.isArray(props.selected)) {
+        preSelection = (0, _map2.default)(props.selected, function (dateSelected) {
           return (0, _moment2.default)(dateSelected);
@@ -157,4 +90,163 @@ });
     } else {
-      preSelection = this.props.selected ? (0, _moment2.default)(this.props.selected) : (0, _moment2.default)();
+      preSelection = props.selected ? (0, _moment2.default)(props.selected) : (0, _moment2.default)();
     }
+
+    _this.state = _this.initialState();
+    return _this;
+  }
+
+  _createClass(DatePicker, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.clearPreventFocusTimeout();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var calendar = this.renderCalendar();
+
+      if (this.props.inline) {
+        return calendar;
+      }
+
+      if (this.props.withPortal) {
+        return _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'div',
+            { className: 'react-datepicker__input-container' },
+            this.renderDateInput(),
+            this.renderClearButton()
+          ),
+          this.state.open ? _react2.default.createElement(
+            'div',
+            { className: 'react-datepicker__portal' },
+            calendar
+          ) : null
+        );
+      }
+
+      return _react2.default.createElement(
+        _tether_component2.default,
+        {
+          classPrefix: 'react-datepicker__tether',
+          attachment: this.props.popoverAttachment,
+          targetAttachment: this.props.popoverTargetAttachment,
+          targetOffset: this.props.popoverTargetOffset,
+          renderElementTo: this.props.renderCalendarTo,
+          constraints: this.props.tetherConstraints },
+        _react2.default.createElement(
+          'div',
+          { className: 'react-datepicker__input-container' },
+          this.renderDateInput(),
+          this.renderClearButton()
+        ),
+        calendar
+      );
+    }
+  }]);
+
+  return DatePicker;
+}(_react.Component);
+
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = {
+  autoComplete: _propTypes2.default.string,
+  autoFocus: _propTypes2.default.bool,
+  calendarClassName: _propTypes2.default.string,
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.string,
+  customInput: _propTypes2.default.element,
+  dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
+  dateFormatCalendar: _propTypes2.default.string,
+  disabled: _propTypes2.default.bool,
+  disabledKeyboardNavigation: _propTypes2.default.bool,
+  dropdownMode: _propTypes2.default.oneOf(['scroll', 'select']).isRequired,
+  endDate: _propTypes2.default.object,
+  excludeDates: _propTypes2.default.array,
+  filterDate: _propTypes2.default.func,
+  fixedHeight: _propTypes2.default.bool,
+  highlightDates: _propTypes2.default.array,
+  id: _propTypes2.default.string,
+  includeDates: _propTypes2.default.array,
+  inline: _propTypes2.default.bool,
+  isClearable: _propTypes2.default.bool,
+  locale: _propTypes2.default.string,
+  maxDate: _propTypes2.default.object,
+  minDate: _propTypes2.default.object,
+  monthsShown: _propTypes2.default.number,
+  name: _propTypes2.default.string,
+  onBlur: _propTypes2.default.func,
+  onChange: _propTypes2.default.func.isRequired,
+  onChangeRaw: _propTypes2.default.func,
+  onFocus: _propTypes2.default.func,
+  onMonthChange: _propTypes2.default.func,
+  openToDate: _propTypes2.default.object,
+  peekNextMonth: _propTypes2.default.bool,
+  placeholderText: _propTypes2.default.string,
+  popoverAttachment: _propTypes2.default.string,
+  popoverTargetAttachment: _propTypes2.default.string,
+  popoverTargetOffset: _propTypes2.default.string,
+  readOnly: _propTypes2.default.bool,
+  renderCalendarTo: _propTypes2.default.any,
+  required: _propTypes2.default.bool,
+  scrollableYearDropdown: _propTypes2.default.bool,
+  selected: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
+  selectsEnd: _propTypes2.default.bool,
+  selectsStart: _propTypes2.default.bool,
+  showMonthDropdown: _propTypes2.default.bool,
+  showWeekNumbers: _propTypes2.default.bool,
+  showYearDropdown: _propTypes2.default.bool,
+  forceShowMonthNavigation: _propTypes2.default.bool,
+  startDate: _propTypes2.default.object,
+  tabIndex: _propTypes2.default.number,
+  tetherConstraints: _propTypes2.default.array,
+  title: _propTypes2.default.string,
+  todayButton: _propTypes2.default.string,
+  utcOffset: _propTypes2.default.number,
+  withPortal: _propTypes2.default.bool,
+  multipleSelect: _propTypes2.default.bool
+};
+DatePicker.defaultProps = {
+  dateFormatCalendar: 'MMMM YYYY',
+  onChange: function onChange() {},
+
+  disabled: false,
+  disabledKeyboardNavigation: false,
+  dropdownMode: 'scroll',
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  onMonthChange: function onMonthChange() {},
+
+  popoverAttachment: 'top left',
+  popoverTargetAttachment: 'bottom left',
+  popoverTargetOffset: '10px 0',
+  tetherConstraints: [{
+    to: 'window',
+    attachment: 'together'
+  }],
+  utcOffset: (0, _moment2.default)().utcOffset(),
+  monthsShown: 1,
+  withPortal: false
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.initialState = function () {
+    var preSelection = void 0;
+
+    if (_this2.props.multipleSelect) {
+      if (Array.isArray(_this2.props.selected)) {
+        preSelection = (0, _map2.default)(_this2.props.selected, function (dateSelected) {
+          return (0, _moment2.default)(dateSelected);
+        });
+      } else {
+        preSelection = (0, _moment2.default)();
+      }
+    } else {
+      preSelection = _this2.props.selected ? (0, _moment2.default)(_this2.props.selected) : (0, _moment2.default)();
+    }
+
     return {
@@ -165,60 +257,63 @@ open: false,
     };
-  },
-  componentWillUnmount: function componentWillUnmount() {
-    this.clearPreventFocusTimeout();
-  },
-  clearPreventFocusTimeout: function clearPreventFocusTimeout() {
-    if (this.preventFocusTimeout) {
-      clearTimeout(this.preventFocusTimeout);
+  };
+
+  this.clearPreventFocusTimeout = function () {
+    if (_this2.preventFocusTimeout) {
+      clearTimeout(_this2.preventFocusTimeout);
     }
-  },
-  setFocus: function setFocus() {
-    this.refs.input.focus();
-  },
-  setOpen: function setOpen(open) {
-    this.setState({
+  };
+
+  this.setFocus = function () {
+    _this2.refs.input.focus();
+  };
+
+  this.setOpen = function (open) {
+    _this2.setState({
       open: open,
-      preSelection: open && this.state.open ? this.state.preSelection : this.getInitialState().preSelection
+      preSelection: open && _this2.state.open ? _this2.state.preSelection : _this2.initialState().preSelection
     });
-  },
-  handleFocus: function handleFocus(event) {
-    if (!this.state.preventFocus) {
-      this.props.onFocus(event);
-      this.setOpen(true);
+  };
+
+  this.handleFocus = function (event) {
+    if (!_this2.state.preventFocus) {
+      _this2.props.onFocus(event);
+      _this2.setOpen(true);
     }
-  },
-  cancelFocusInput: function cancelFocusInput() {
-    clearTimeout(this.inputFocusTimeout);
-    this.inputFocusTimeout = null;
-  },
-  deferFocusInput: function deferFocusInput() {
-    var _this = this;
+  };
 
-    this.cancelFocusInput();
-    this.inputFocusTimeout = window.setTimeout(function () {
-      return _this.setFocus();
+  this.cancelFocusInput = function () {
+    clearTimeout(_this2.inputFocusTimeout);
+    _this2.inputFocusTimeout = null;
+  };
+
+  this.deferFocusInput = function () {
+    _this2.cancelFocusInput();
+    _this2.inputFocusTimeout = window.setTimeout(function () {
+      return _this2.setFocus();
     }, 1);
-  },
-  handleDropdownFocus: function handleDropdownFocus() {
-    this.cancelFocusInput();
-  },
-  handleBlur: function handleBlur(event) {
-    if (this.state.open) {
-      this.deferFocusInput();
+  };
+
+  this.handleDropdownFocus = function () {
+    _this2.cancelFocusInput();
+  };
+
+  this.handleBlur = function (event) {
+    if (_this2.state.open) {
+      _this2.deferFocusInput();
     } else {
-      this.props.onBlur(event);
+      _this2.props.onBlur(event);
     }
-  },
-  handleCalendarClickOutside: function handleCalendarClickOutside(event) {
-    this.setOpen(false);
-    if (this.props.withPortal) {
+  };
+
+  this.handleCalendarClickOutside = function (event) {
+    _this2.setOpen(false);
+    if (_this2.props.withPortal) {
       event.preventDefault();
     }
-  },
-  handleSelect: function handleSelect(date, event) {
-    var _this2 = this;
+  };
 
+  this.handleSelect = function (date, event) {
     // Preventing onFocus event to fix issue
     // https://github.com/Hacker0x01/react-datepicker/issues/628
-    this.setState({ preventFocus: true }, function () {
+    _this2.setState({ preventFocus: true }, function () {
       _this2.preventFocusTimeout = setTimeout(function () {
@@ -229,29 +324,30 @@ return _this2.setState({ preventFocus: false });
     });
-    this.setSelected(date, event);
-    if (!this.props.multipleSelect) {
-      this.setOpen(false);
+    _this2.setSelected(date, event);
+    if (!_this2.props.multipleSelect) {
+      _this2.setOpen(false);
     }
-  },
-  setSelected: function setSelected(date, event) {
+  };
+
+  this.setSelected = function (date, event) {
     var changedDate = date;
 
-    if (changedDate !== null && (0, _date_utils.isDayDisabled)(changedDate, this.props)) {
+    if (changedDate !== null && (0, _date_utils.isDayDisabled)(changedDate, _this2.props)) {
       return;
     }
-    if (!(0, _date_utils.isSameDay)(this.props.selected, changedDate)) {
-      if (this.props.multipleSelect) {
+    if (!(0, _date_utils.isSameDay)(_this2.props.selected, changedDate)) {
+      if (_this2.props.multipleSelect) {
         changedDate = new Array(changedDate);
-        var preSelected = Array.isArray(this.state.preSelection) ? changedDate.concat(this.state.preSelection) : changedDate;
-        this.setState({ preSelection: preSelected });
-        this.props.onChange(preSelected, event);
+        var preSelected = Array.isArray(_this2.state.preSelection) ? changedDate.concat(_this2.state.preSelection) : changedDate;
+        _this2.setState({ preSelection: preSelected });
+        _this2.props.onChange(preSelected, event);
       } else {
-        this.setState({
+        _this2.setState({
           preSelection: changedDate
         });
-        this.props.onChange(changedDate, event);
+        _this2.props.onChange(changedDate, event);
       }
     } else {
       if (changedDate !== null) {
-        if (this.props.multipleSelect) {
-          var _preSelected = this.state.preSelection;
+        if (_this2.props.multipleSelect) {
+          var _preSelected = _this2.state.preSelection;
           var index = void 0;
@@ -264,40 +360,43 @@ _preSelected.find(function (item, idx) {
           _preSelected.splice(index, 1);
-          this.setState({ preSelection: _preSelected });
-          this.props.onChange(_preSelected, event);
+          _this2.setState({ preSelection: _preSelected });
+          _this2.props.onChange(_preSelected, event);
         }
       }
     }
-  },
-  setPreSelection: function setPreSelection(date) {
-    var isDateRangePresent = typeof this.props.minDate !== 'undefined' && typeof this.props.maxDate !== 'undefined';
-    var isValidDateSelection = isDateRangePresent ? (0, _date_utils.isDayInRange)(date, this.props.minDate, this.props.maxDate) : true;
+  };
+
+  this.setPreSelection = function (date) {
+    var isDateRangePresent = typeof _this2.props.minDate !== 'undefined' && typeof _this2.props.maxDate !== 'undefined';
+    var isValidDateSelection = isDateRangePresent ? (0, _date_utils.isDayInRange)(date, _this2.props.minDate, _this2.props.maxDate) : true;
     if (isValidDateSelection) {
-      this.setState({
+      _this2.setState({
         preSelection: date
       });
     }
-  },
-  onInputClick: function onInputClick() {
-    if (!this.props.disabled) {
-      this.setOpen(true);
+  };
+
+  this.onInputClick = function () {
+    if (!_this2.props.disabled) {
+      _this2.setOpen(true);
     }
-  },
-  onInputKeyDown: function onInputKeyDown(event) {
-    if (!this.state.open && !this.props.inline) {
+  };
+
+  this.onInputKeyDown = function (event) {
+    if (!_this2.state.open && !_this2.props.inline) {
       if (/^Arrow/.test(event.key)) {
-        this.onInputClick();
+        _this2.onInputClick();
       }
       return;
     }
-    var copy = (0, _moment2.default)(this.state.preSelection);
+    var copy = (0, _moment2.default)(_this2.state.preSelection);
     if (event.key === 'Enter') {
       event.preventDefault();
-      this.handleSelect(copy, event);
+      _this2.handleSelect(copy, event);
     } else if (event.key === 'Escape') {
       event.preventDefault();
-      this.setOpen(false);
+      _this2.setOpen(false);
     } else if (event.key === 'Tab') {
-      this.setOpen(false);
+      _this2.setOpen(false);
     }
-    if (!this.props.disabledKeyboardNavigation) {
+    if (!_this2.props.disabledKeyboardNavigation) {
       var newSelection = void 0;
@@ -338,11 +437,13 @@ switch (event.key) {
       }
-      this.setPreSelection(newSelection);
+      _this2.setPreSelection(newSelection);
     }
-  },
-  onClearClick: function onClearClick(event) {
+  };
+
+  this.onClearClick = function (event) {
     event.preventDefault();
-    this.props.onChange(null, event);
-  },
-  renderCalendar: function renderCalendar() {
-    if (!this.props.inline && (!this.state.open || this.props.disabled)) {
+    _this2.props.onChange(null, event);
+  };
+
+  this.renderCalendar = function () {
+    if (!_this2.props.inline && (!_this2.state.open || _this2.props.disabled)) {
       return null;
@@ -354,121 +455,82 @@ }
         ref: 'calendar',
-        locale: this.props.locale,
-        dateFormat: this.props.dateFormatCalendar,
-        dropdownMode: this.props.dropdownMode,
-        selected: this.props.selected,
-        preSelection: this.state.preSelection,
-        onSelect: this.handleSelect,
-        openToDate: this.props.openToDate,
-        minDate: this.props.minDate,
-        maxDate: this.props.maxDate,
-        selectsStart: this.props.selectsStart,
-        selectsEnd: this.props.selectsEnd,
-        startDate: this.props.startDate,
-        endDate: this.props.endDate,
-        excludeDates: this.props.excludeDates,
-        filterDate: this.props.filterDate,
-        onClickOutside: this.handleCalendarClickOutside,
-        highlightDates: this.props.highlightDates,
-        includeDates: this.props.includeDates,
-        inline: this.props.inline,
-        peekNextMonth: this.props.peekNextMonth,
-        showMonthDropdown: this.props.showMonthDropdown,
-        showWeekNumbers: this.props.showWeekNumbers,
-        showYearDropdown: this.props.showYearDropdown,
-        forceShowMonthNavigation: this.props.forceShowMonthNavigation,
-        scrollableYearDropdown: this.props.scrollableYearDropdown,
-        todayButton: this.props.todayButton,
-        utcOffset: this.props.utcOffset,
+        locale: _this2.props.locale,
+        dateFormat: _this2.props.dateFormatCalendar,
+        dropdownMode: _this2.props.dropdownMode,
+        selected: _this2.props.selected,
+        preSelection: _this2.state.preSelection,
+        onSelect: _this2.handleSelect,
+        openToDate: _this2.props.openToDate,
+        minDate: _this2.props.minDate,
+        maxDate: _this2.props.maxDate,
+        selectsStart: _this2.props.selectsStart,
+        selectsEnd: _this2.props.selectsEnd,
+        startDate: _this2.props.startDate,
+        endDate: _this2.props.endDate,
+        excludeDates: _this2.props.excludeDates,
+        filterDate: _this2.props.filterDate,
+        onClickOutside: _this2.handleCalendarClickOutside,
+        highlightDates: _this2.props.highlightDates,
+        includeDates: _this2.props.includeDates,
+        inline: _this2.props.inline,
+        peekNextMonth: _this2.props.peekNextMonth,
+        showMonthDropdown: _this2.props.showMonthDropdown,
+        showWeekNumbers: _this2.props.showWeekNumbers,
+        showYearDropdown: _this2.props.showYearDropdown,
+        forceShowMonthNavigation: _this2.props.forceShowMonthNavigation,
+        scrollableYearDropdown: _this2.props.scrollableYearDropdown,
+        todayButton: _this2.props.todayButton,
+        utcOffset: _this2.props.utcOffset,
         outsideClickIgnoreClass: outsideClickIgnoreClass,
-        fixedHeight: this.props.fixedHeight,
-        monthsShown: this.props.monthsShown,
-        onDropdownFocus: this.handleDropdownFocus,
-        onMonthChange: this.props.onMonthChange,
-        className: this.props.calendarClassName },
-      this.props.children
+        fixedHeight: _this2.props.fixedHeight,
+        monthsShown: _this2.props.monthsShown,
+        onDropdownFocus: _this2.handleDropdownFocus,
+        onMonthChange: _this2.props.onMonthChange,
+        className: _this2.props.calendarClassName },
+      _this2.props.children
     );
-  },
-  renderDateInput: function renderDateInput() {
-    var className = (0, _classnames3.default)(this.props.className, _defineProperty({}, outsideClickIgnoreClass, this.state.open));
+  };
 
+  this.renderDateInput = function () {
+    var className = (0, _classnames3.default)(_this2.props.className, _defineProperty({}, outsideClickIgnoreClass, _this2.state.open));
+
     return _react2.default.createElement(_date_input2.default, {
       ref: 'input',
-      id: this.props.id,
-      name: this.props.name,
-      autoFocus: this.props.autoFocus,
-      date: this.props.selected,
-      locale: this.props.locale,
-      minDate: this.props.minDate,
-      maxDate: this.props.maxDate,
-      excludeDates: this.props.excludeDates,
-      includeDates: this.props.includeDates,
-      filterDate: this.props.filterDate,
-      dateFormat: this.props.dateFormat,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onClick: this.onInputClick,
-      onChangeRaw: this.props.onChangeRaw,
-      onKeyDown: this.onInputKeyDown,
-      onChangeDate: this.setSelected,
-      placeholder: this.props.placeholderText,
-      disabled: this.props.disabled,
-      autoComplete: this.props.autoComplete,
+      id: _this2.props.id,
+      name: _this2.props.name,
+      autoFocus: _this2.props.autoFocus,
+      date: _this2.props.selected,
+      locale: _this2.props.locale,
+      minDate: _this2.props.minDate,
+      maxDate: _this2.props.maxDate,
+      excludeDates: _this2.props.excludeDates,
+      includeDates: _this2.props.includeDates,
+      filterDate: _this2.props.filterDate,
+      dateFormat: _this2.props.dateFormat,
+      onFocus: _this2.handleFocus,
+      onBlur: _this2.handleBlur,
+      onClick: _this2.onInputClick,
+      onChangeRaw: _this2.props.onChangeRaw,
+      onKeyDown: _this2.onInputKeyDown,
+      onChangeDate: _this2.setSelected,
+      placeholder: _this2.props.placeholderText,
+      disabled: _this2.props.disabled,
+      autoComplete: _this2.props.autoComplete,
       className: className,
-      title: this.props.title,
-      readOnly: this.props.readOnly,
-      required: this.props.required,
-      tabIndex: this.props.tabIndex,
-      customInput: this.props.customInput,
-      multipleSelect: this.props.multipleSelect });
-  },
-  renderClearButton: function renderClearButton() {
-    if (this.props.isClearable && this.props.selected != null) {
-      return _react2.default.createElement('a', { className: 'react-datepicker__close-icon', href: '#', onClick: this.onClearClick });
+      title: _this2.props.title,
+      readOnly: _this2.props.readOnly,
+      required: _this2.props.required,
+      tabIndex: _this2.props.tabIndex,
+      customInput: _this2.props.customInput,
+      multipleSelect: _this2.props.multipleSelect });
+  };
+
+  this.renderClearButton = function () {
+    if (_this2.props.isClearable && _this2.props.selected != null) {
+      return _react2.default.createElement('a', { className: 'react-datepicker__close-icon', href: '#', onClick: _this2.onClearClick });
     } else {
       return null;
     }
-  },
-  render: function render() {
-    var calendar = this.renderCalendar();
+  };
+};
 
-    if (this.props.inline) {
-      return calendar;
-    }
-
-    if (this.props.withPortal) {
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'div',
-          { className: 'react-datepicker__input-container' },
-          this.renderDateInput(),
-          this.renderClearButton()
-        ),
-        this.state.open ? _react2.default.createElement(
-          'div',
-          { className: 'react-datepicker__portal' },
-          calendar
-        ) : null
-      );
-    }
-
-    return _react2.default.createElement(
-      _tether_component2.default,
-      {
-        classPrefix: 'react-datepicker__tether',
-        attachment: this.props.popoverAttachment,
-        targetAttachment: this.props.popoverTargetAttachment,
-        targetOffset: this.props.popoverTargetOffset,
-        renderElementTo: this.props.renderCalendarTo,
-        constraints: this.props.tetherConstraints },
-      _react2.default.createElement(
-        'div',
-        { className: 'react-datepicker__input-container' },
-        this.renderDateInput(),
-        this.renderClearButton()
-      ),
-      calendar
-    );
-  }
-});
+exports.default = DatePicker;

package.json

@@ -5,3 +5,3 @@ {
   "description": "A simple and reusable datepicker component for React",
-  "version": "0.41.7",
+  "version": "0.41.8",
   "license": "MIT",
@@ -8,0 +8,0 @@ "homepage": "https://github.com/wework/react-datepicker",

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

522328

decreased by-5.65%

Lines of code

10743

decreased by-7.52%

No dependency changes