diff --git a/.babelrc b/.babelrc
index 7c24b2a..564180a 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["stage-1", "es2015", "react"]
+  "presets": ["stage-1", "es2015", "react"],
+  "plugins": ["transform-class-properties"]
 }
diff --git a/lib/index.js b/lib/index.js
index 23b3a0e..b3a1906 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -36,371 +38,543 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _createReactClass = require('create-react-class');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _createReactClass2 = _interopRequireDefault(_createReactClass);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 
-var instanceCount = 0; // See http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html for calendar logic.
+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; } // See http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html for calendar logic.
 
-var CalendarHeader = (0, _createReactClass2.default)({
-  displayName: 'DatePickerHeader',
+var instanceCount = 0;
 
-  propTypes: {
-    displayDate: _propTypes2.default.object.isRequired,
-    minDate: _propTypes2.default.string,
-    maxDate: _propTypes2.default.string,
-    onChange: _propTypes2.default.func.isRequired,
-    monthLabels: _propTypes2.default.array.isRequired,
-    previousButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired,
-    nextButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
-  },
+var CalendarHeader = function (_React$Component) {
+  _inherits(CalendarHeader, _React$Component);
 
-  displayingMinMonth: function displayingMinMonth() {
-    if (!this.props.minDate) return false;
+  function CalendarHeader() {
+    var _ref;
 
-    var displayDate = new Date(this.props.displayDate);
-    var minDate = new Date(this.props.minDate);
-    return minDate.getFullYear() == displayDate.getFullYear() && minDate.getMonth() == displayDate.getMonth();
-  },
-  displayingMaxMonth: function displayingMaxMonth() {
-    if (!this.props.maxDate) return false;
+    var _temp, _this, _ret;
 
-    var displayDate = new Date(this.props.displayDate);
-    var maxDate = new Date(this.props.maxDate);
-    return maxDate.getFullYear() == displayDate.getFullYear() && maxDate.getMonth() == displayDate.getMonth();
-  },
-  handleClickPrevious: function handleClickPrevious() {
-    var newDisplayDate = new Date(this.props.displayDate);
-    newDisplayDate.setDate(1);
-    newDisplayDate.setMonth(newDisplayDate.getMonth() - 1);
-    this.props.onChange(newDisplayDate);
-  },
-  handleClickNext: function handleClickNext() {
-    var newDisplayDate = new Date(this.props.displayDate);
-    newDisplayDate.setDate(1);
-    newDisplayDate.setMonth(newDisplayDate.getMonth() + 1);
-    this.props.onChange(newDisplayDate);
-  },
-  render: function render() {
-    return _react2.default.createElement(
-      'div',
-      { className: 'text-center' },
-      _react2.default.createElement(
-        'div',
-        { className: 'text-muted pull-left datepicker-previous-wrapper', onClick: this.handleClickPrevious, style: { cursor: 'pointer' } },
-        this.displayingMinMonth() ? null : this.props.previousButtonElement
-      ),
-      _react2.default.createElement(
-        'span',
-        null,
-        this.props.monthLabels[this.props.displayDate.getMonth()],
-        ' ',
-        this.props.displayDate.getFullYear()
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: 'text-muted pull-right datepicker-next-wrapper', onClick: this.handleClickNext, style: { cursor: 'pointer' } },
-        this.displayingMaxMonth() ? null : this.props.nextButtonElement
-      )
-    );
+    _classCallCheck(this, CalendarHeader);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarHeader.__proto__ || Object.getPrototypeOf(CalendarHeader)).call.apply(_ref, [this].concat(args))), _this), _this.displayingMinMonth = function () {
+      if (!_this.props.minDate) return false;
+
+      var displayDate = new Date(_this.props.displayDate);
+      var minDate = new Date(_this.props.minDate);
+      return minDate.getFullYear() == displayDate.getFullYear() && minDate.getMonth() == displayDate.getMonth();
+    }, _this.displayingMaxMonth = function () {
+      if (!_this.props.maxDate) return false;
+
+      var displayDate = new Date(_this.props.displayDate);
+      var maxDate = new Date(_this.props.maxDate);
+      return maxDate.getFullYear() == displayDate.getFullYear() && maxDate.getMonth() == displayDate.getMonth();
+    }, _this.handleClickPrevious = function () {
+      var newDisplayDate = new Date(_this.props.displayDate);
+      newDisplayDate.setDate(1);
+      newDisplayDate.setMonth(newDisplayDate.getMonth() - 1);
+      _this.props.onChange(newDisplayDate);
+    }, _this.handleClickNext = function () {
+      var newDisplayDate = new Date(_this.props.displayDate);
+      newDisplayDate.setDate(1);
+      newDisplayDate.setMonth(newDisplayDate.getMonth() + 1);
+      _this.props.onChange(newDisplayDate);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
-});
+
+  _createClass(CalendarHeader, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { className: 'text-center' },
+        _react2.default.createElement(
+          'div',
+          { className: 'text-muted pull-left datepicker-previous-wrapper', onClick: this.handleClickPrevious, style: { cursor: 'pointer' } },
+          this.displayingMinMonth() ? null : this.props.previousButtonElement
+        ),
+        _react2.default.createElement(
+          'span',
+          null,
+          this.props.monthLabels[this.props.displayDate.getMonth()],
+          ' ',
+          this.props.displayDate.getFullYear()
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'text-muted pull-right datepicker-next-wrapper', onClick: this.handleClickNext, style: { cursor: 'pointer' } },
+          this.displayingMaxMonth() ? null : this.props.nextButtonElement
+        )
+      );
+    }
+  }]);
+
+  return CalendarHeader;
+}(_react2.default.Component);
+
+CalendarHeader.displayName = 'DatePickerHeader';
+CalendarHeader.propTypes = {
+  displayDate: _propTypes2.default.object.isRequired,
+  minDate: _propTypes2.default.string,
+  maxDate: _propTypes2.default.string,
+  onChange: _propTypes2.default.func.isRequired,
+  monthLabels: _propTypes2.default.array.isRequired,
+  previousButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired,
+  nextButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
+};
+
 
 var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
-var Calendar = (0, _createReactClass2.default)({
-  displayName: 'DatePickerCalendar',
-
-  propTypes: {
-    selectedDate: _propTypes2.default.object,
-    displayDate: _propTypes2.default.object.isRequired,
-    minDate: _propTypes2.default.string,
-    maxDate: _propTypes2.default.string,
-    onChange: _propTypes2.default.func.isRequired,
-    dayLabels: _propTypes2.default.array.isRequired,
-    cellPadding: _propTypes2.default.string.isRequired,
-    weekStartsOn: _propTypes2.default.number,
-    showTodayButton: _propTypes2.default.bool,
-    todayButtonLabel: _propTypes2.default.string,
-    roundedCorners: _propTypes2.default.bool,
-    showWeeks: _propTypes2.default.bool
-  },
+var Calendar = function (_React$Component2) {
+  _inherits(Calendar, _React$Component2);
 
-  handleClick: function handleClick(e) {
-    var day = e.currentTarget.getAttribute('data-day');
-    var newSelectedDate = this.setTimeToNoon(new Date(this.props.displayDate));
-    newSelectedDate.setDate(day);
-    this.props.onChange(newSelectedDate);
-  },
-  handleClickToday: function handleClickToday() {
-    var newSelectedDate = this.setTimeToNoon(new Date());
-    this.props.onChange(newSelectedDate);
-  },
-  setTimeToNoon: function setTimeToNoon(date) {
-    date.setHours(12);
-    date.setMinutes(0);
-    date.setSeconds(0);
-    date.setMilliseconds(0);
-    return date;
-  },
-  getWeekNumber: function getWeekNumber(date) {
-    var target = new Date(date.valueOf());
-    var dayNr = (date.getDay() + 6) % 7;
-    target.setDate(target.getDate() - dayNr + 3);
-    var firstThursday = target.valueOf();
-    target.setMonth(0, 1);
-    if (target.getDay() !== 4) {
-      target.setMonth(0, 1 + (4 - target.getDay() + 7) % 7);
+  function Calendar() {
+    var _ref2;
+
+    var _temp2, _this2, _ret2;
+
+    _classCallCheck(this, Calendar);
+
+    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
-    return 1 + Math.ceil((firstThursday - target) / 604800000);
-  },
-  render: function render() {
-    var _this = this;
-
-    var currentDate = this.setTimeToNoon(new Date());
-    var selectedDate = this.props.selectedDate ? this.setTimeToNoon(new Date(this.props.selectedDate)) : null;
-    var minDate = this.props.minDate ? this.setTimeToNoon(new Date(this.props.minDate)) : null;
-    var maxDate = this.props.maxDate ? this.setTimeToNoon(new Date(this.props.maxDate)) : null;
-    var year = this.props.displayDate.getFullYear();
-    var month = this.props.displayDate.getMonth();
-    var firstDay = new Date(year, month, 1);
-    var startingDay = this.props.weekStartsOn > 1 ? firstDay.getDay() - this.props.weekStartsOn + 7 : this.props.weekStartsOn === 1 ? firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1 : firstDay.getDay();
-    var showWeeks = this.props.showWeeks;
-
-    var monthLength = daysInMonth[month];
-    if (month == 1) {
-      if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
-        monthLength = 29;
+
+    return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref2, [this].concat(args))), _this2), _this2.handleClick = function (e) {
+      var day = e.currentTarget.getAttribute('data-day');
+      var newSelectedDate = _this2.setTimeToNoon(new Date(_this2.props.displayDate));
+      newSelectedDate.setDate(day);
+      _this2.props.onChange(newSelectedDate);
+    }, _this2.handleClickToday = function () {
+      var newSelectedDate = _this2.setTimeToNoon(new Date());
+      _this2.props.onChange(newSelectedDate);
+    }, _this2.setTimeToNoon = function (date) {
+      date.setHours(12);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      return date;
+    }, _this2.getWeekNumber = function (date) {
+      var target = new Date(date.valueOf());
+      var dayNr = (date.getDay() + 6) % 7;
+      target.setDate(target.getDate() - dayNr + 3);
+      var firstThursday = target.valueOf();
+      target.setMonth(0, 1);
+      if (target.getDay() !== 4) {
+        target.setMonth(0, 1 + (4 - target.getDay() + 7) % 7);
       }
-    }
+      return 1 + Math.ceil((firstThursday - target) / 604800000);
+    }, _temp2), _possibleConstructorReturn(_this2, _ret2);
+  }
 
-    var weeks = [];
-    var day = 1;
-    for (var i = 0; i < 9; i++) {
-      var week = [];
-      for (var j = 0; j <= 6; j++) {
-        if (day <= monthLength && (i > 0 || j >= startingDay)) {
-          var className = null;
-          var date = new Date(year, month, day, 12, 0, 0, 0).toISOString();
-          var beforeMinDate = minDate && Date.parse(date) < Date.parse(minDate);
-          var afterMinDate = maxDate && Date.parse(date) > Date.parse(maxDate);
-          var clickHandler = this.handleClick;
-          var style = { cursor: 'pointer', padding: this.props.cellPadding, borderRadius: this.props.roundedCorners ? 5 : 0 };
-
-          if (beforeMinDate || afterMinDate) {
-            className = 'text-muted';
-            clickHandler = null;
-            style.cursor = 'default';
-          } else if (Date.parse(date) === Date.parse(selectedDate)) {
-            className = 'bg-primary';
-          } else if (Date.parse(date) === Date.parse(currentDate)) {
-            className = 'text-primary';
+  _createClass(Calendar, [{
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      var currentDate = this.setTimeToNoon(new Date());
+      var selectedDate = this.props.selectedDate ? this.setTimeToNoon(new Date(this.props.selectedDate)) : null;
+      var minDate = this.props.minDate ? this.setTimeToNoon(new Date(this.props.minDate)) : null;
+      var maxDate = this.props.maxDate ? this.setTimeToNoon(new Date(this.props.maxDate)) : null;
+      var year = this.props.displayDate.getFullYear();
+      var month = this.props.displayDate.getMonth();
+      var firstDay = new Date(year, month, 1);
+      var startingDay = this.props.weekStartsOn > 1 ? firstDay.getDay() - this.props.weekStartsOn + 7 : this.props.weekStartsOn === 1 ? firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1 : firstDay.getDay();
+      var showWeeks = this.props.showWeeks;
+
+      var monthLength = daysInMonth[month];
+      if (month == 1) {
+        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
+          monthLength = 29;
+        }
+      }
+
+      var weeks = [];
+      var day = 1;
+      for (var i = 0; i < 9; i++) {
+        var week = [];
+        for (var j = 0; j <= 6; j++) {
+          if (day <= monthLength && (i > 0 || j >= startingDay)) {
+            var className = null;
+            var date = new Date(year, month, day, 12, 0, 0, 0).toISOString();
+            var beforeMinDate = minDate && Date.parse(date) < Date.parse(minDate);
+            var afterMinDate = maxDate && Date.parse(date) > Date.parse(maxDate);
+            var clickHandler = this.handleClick;
+            var style = { cursor: 'pointer', padding: this.props.cellPadding, borderRadius: this.props.roundedCorners ? 5 : 0 };
+
+            if (beforeMinDate || afterMinDate) {
+              className = 'text-muted';
+              clickHandler = null;
+              style.cursor = 'default';
+            } else if (Date.parse(date) === Date.parse(selectedDate)) {
+              className = 'bg-primary';
+            } else if (Date.parse(date) === Date.parse(currentDate)) {
+              className = 'text-primary';
+            }
+
+            week.push(_react2.default.createElement(
+              'td',
+              {
+                key: j,
+                'data-day': day,
+                onClick: clickHandler,
+                style: style,
+                className: className
+              },
+              day
+            ));
+            day++;
+          } else {
+            week.push(_react2.default.createElement('td', { key: j }));
           }
+        }
 
-          week.push(_react2.default.createElement(
+        if (showWeeks) {
+          var weekNum = this.getWeekNumber(new Date(year, month, day - 1, 12, 0, 0, 0));
+          week.unshift(_react2.default.createElement(
             'td',
             {
-              key: j,
-              'data-day': day,
-              onClick: clickHandler,
-              style: style,
-              className: className
+              key: 7,
+              style: { padding: this.props.cellPadding, fontSize: '0.8em', color: 'darkgrey' },
+              className: 'text-muted'
             },
-            day
+            weekNum
           ));
-          day++;
-        } else {
-          week.push(_react2.default.createElement('td', { key: j }));
         }
-      }
 
-      if (showWeeks) {
-        var weekNum = this.getWeekNumber(new Date(year, month, day - 1, 12, 0, 0, 0));
-        week.unshift(_react2.default.createElement(
-          'td',
-          {
-            key: 7,
-            style: { padding: this.props.cellPadding, fontSize: '0.8em', color: 'darkgrey' },
-            className: 'text-muted'
-          },
-          weekNum
+        weeks.push(_react2.default.createElement(
+          'tr',
+          { key: i },
+          week
         ));
+        if (day > monthLength) {
+          break;
+        }
       }
 
-      weeks.push(_react2.default.createElement(
-        'tr',
-        { key: i },
-        week
-      ));
-      if (day > monthLength) {
-        break;
-      }
-    }
-
-    var weekColumn = showWeeks ? _react2.default.createElement('td', {
-      className: 'text-muted current-week',
-      style: { padding: this.props.cellPadding } }) : null;
+      var weekColumn = showWeeks ? _react2.default.createElement('td', {
+        className: 'text-muted current-week',
+        style: { padding: this.props.cellPadding } }) : null;
 
-    return _react2.default.createElement(
-      'table',
-      { className: 'text-center' },
-      _react2.default.createElement(
-        'thead',
-        null,
+      return _react2.default.createElement(
+        'table',
+        { className: 'text-center' },
         _react2.default.createElement(
-          'tr',
+          'thead',
           null,
-          weekColumn,
-          this.props.dayLabels.map(function (label, index) {
-            return _react2.default.createElement(
-              'td',
-              {
-                key: index,
-                className: 'text-muted',
-                style: { padding: _this.props.cellPadding } },
-              _react2.default.createElement(
-                'small',
-                null,
-                label
-              )
-            );
-          })
-        )
-      ),
-      _react2.default.createElement(
-        'tbody',
-        null,
-        weeks
-      ),
-      this.props.showTodayButton && _react2.default.createElement(
-        'tfoot',
-        null,
+          _react2.default.createElement(
+            'tr',
+            null,
+            weekColumn,
+            this.props.dayLabels.map(function (label, index) {
+              return _react2.default.createElement(
+                'td',
+                {
+                  key: index,
+                  className: 'text-muted',
+                  style: { padding: _this3.props.cellPadding } },
+                _react2.default.createElement(
+                  'small',
+                  null,
+                  label
+                )
+              );
+            })
+          )
+        ),
         _react2.default.createElement(
-          'tr',
+          'tbody',
+          null,
+          weeks
+        ),
+        this.props.showTodayButton && _react2.default.createElement(
+          'tfoot',
           null,
           _react2.default.createElement(
-            'td',
-            { colSpan: this.props.dayLabels.length, style: { paddingTop: '9px' } },
+            'tr',
+            null,
             _react2.default.createElement(
-              _Button2.default,
-              {
-                block: true,
-                bsSize: 'xsmall',
-                className: 'u-today-button',
-                onClick: this.handleClickToday },
-              this.props.todayButtonLabel
+              'td',
+              { colSpan: this.props.dayLabels.length, style: { paddingTop: '9px' } },
+              _react2.default.createElement(
+                _Button2.default,
+                {
+                  block: true,
+                  bsSize: 'xsmall',
+                  className: 'u-today-button',
+                  onClick: this.handleClickToday },
+                this.props.todayButtonLabel
+              )
             )
           )
         )
-      )
-    );
-  }
-});
-
-exports.default = (0, _createReactClass2.default)({
-  displayName: 'DatePicker',
-
-  propTypes: {
-    defaultValue: _propTypes2.default.string,
-    value: _propTypes2.default.string,
-    required: _propTypes2.default.bool,
-    className: _propTypes2.default.string,
-    style: _propTypes2.default.object,
-    minDate: _propTypes2.default.string,
-    maxDate: _propTypes2.default.string,
-    cellPadding: _propTypes2.default.string,
-    autoComplete: _propTypes2.default.string,
-    placeholder: _propTypes2.default.string,
-    dayLabels: _propTypes2.default.array,
-    monthLabels: _propTypes2.default.array,
-    onChange: _propTypes2.default.func,
-    onClear: _propTypes2.default.func,
-    onBlur: _propTypes2.default.func,
-    onFocus: _propTypes2.default.func,
-    autoFocus: _propTypes2.default.bool,
-    disabled: _propTypes2.default.bool,
-    weekStartsOnMonday: function weekStartsOnMonday(props, propName, componentName) {
-      if (props[propName]) {
-        return new Error('Prop \'' + propName + '\' supplied to \'' + componentName + '\' is obsolete. Use \'weekStartsOn\' instead.');
-      }
-    },
-    weekStartsOn: _propTypes2.default.number,
-    clearButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-    showClearButton: _propTypes2.default.bool,
-    previousButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-    nextButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-    calendarPlacement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-    dateFormat: _propTypes2.default.string, // 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'
-    bsClass: _propTypes2.default.string,
-    bsSize: _propTypes2.default.string,
-    calendarContainer: _propTypes2.default.object,
-    id: _propTypes2.default.string,
-    name: _propTypes2.default.string,
-    showTodayButton: _propTypes2.default.bool,
-    todayButtonLabel: _propTypes2.default.string,
-    instanceCount: _propTypes2.default.number,
-    customControl: _propTypes2.default.object,
-    roundedCorners: _propTypes2.default.bool,
-    showWeeks: _propTypes2.default.bool,
-    children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]),
-    onInvalid: _propTypes2.default.func,
-    noValidate: _propTypes2.default.bool
-  },
-
-  getDefaultProps: function getDefaultProps() {
-    var language = typeof window !== 'undefined' && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
-    var dateFormat = !language || language === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
-    return {
-      cellPadding: '5px',
-      dayLabels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      monthLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      clearButtonElement: '×',
-      previousButtonElement: '<',
-      nextButtonElement: '>',
-      calendarPlacement: 'bottom',
-      dateFormat: dateFormat,
-      showClearButton: true,
-      autoFocus: false,
-      disabled: false,
-      showTodayButton: false,
-      todayButtonLabel: 'Today',
-      autoComplete: 'on',
-      showWeeks: false,
-      instanceCount: instanceCount++,
-      style: {
-        width: '100%'
-      },
-      roundedCorners: false,
-      noValidate: false
-    };
-  },
-  getInitialState: function getInitialState() {
-    if (this.props.value && this.props.defaultValue) {
+      );
+    }
+  }]);
+
+  return Calendar;
+}(_react2.default.Component);
+
+Calendar.displayName = 'DatePickerCalendar';
+Calendar.propTypes = {
+  selectedDate: _propTypes2.default.object,
+  displayDate: _propTypes2.default.object.isRequired,
+  minDate: _propTypes2.default.string,
+  maxDate: _propTypes2.default.string,
+  onChange: _propTypes2.default.func.isRequired,
+  dayLabels: _propTypes2.default.array.isRequired,
+  cellPadding: _propTypes2.default.string.isRequired,
+  weekStartsOn: _propTypes2.default.number,
+  showTodayButton: _propTypes2.default.bool,
+  todayButtonLabel: _propTypes2.default.string,
+  roundedCorners: _propTypes2.default.bool,
+  showWeeks: _propTypes2.default.bool
+};
+
+var _class = function (_React$Component3) {
+  _inherits(_class, _React$Component3);
+
+  function _class(props, context) {
+    _classCallCheck(this, _class);
+
+    var _this4 = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this, props, context));
+
+    _initialiseProps.call(_this4);
+
+    if (props.value && props.defaultValue) {
       throw new Error('Conflicting DatePicker properties \'value\' and \'defaultValue\'');
     }
-    var state = this.makeDateValues(this.props.value || this.props.defaultValue);
-    if (this.props.weekStartsOn > 1) {
-      state.dayLabels = this.props.dayLabels.slice(this.props.weekStartsOn).concat(this.props.dayLabels.slice(0, this.props.weekStartsOn));
-    } else if (this.props.weekStartsOn === 1) {
-      state.dayLabels = this.props.dayLabels.slice(1).concat(this.props.dayLabels.slice(0, 1));
+    var state = _this4.makeDateValues(props.value || props.defaultValue);
+    if (props.weekStartsOn > 1) {
+      state.dayLabels = props.dayLabels.slice(props.weekStartsOn).concat(props.dayLabels.slice(0, props.weekStartsOn));
+    } else if (props.weekStartsOn === 1) {
+      state.dayLabels = props.dayLabels.slice(1).concat(props.dayLabels.slice(0, 1));
     } else {
-      state.dayLabels = this.props.dayLabels;
+      state.dayLabels = props.dayLabels;
     }
     state.focused = false;
     state.inputFocused = false;
-    state.placeholder = this.props.placeholder || this.props.dateFormat;
-    state.separator = this.props.dateFormat.match(/[^A-Z]/)[0];
-    return state;
+    state.placeholder = props.placeholder || props.dateFormat;
+    state.separator = props.dateFormat.match(/[^A-Z]/)[0];
+    _this4.state = state;
+    return _this4;
+  }
+
+  _createClass(_class, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      return !(this.state.inputFocused === true && nextState.inputFocused === false);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(newProps) {
+      var value = newProps.value;
+      if (this.getValue() !== value) {
+        this.setState(this.makeDateValues(value));
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this5 = this;
+
+      var calendarHeader = _react2.default.createElement(CalendarHeader, {
+        previousButtonElement: this.props.previousButtonElement,
+        nextButtonElement: this.props.nextButtonElement,
+        displayDate: this.state.displayDate,
+        minDate: this.props.minDate,
+        maxDate: this.props.maxDate,
+        onChange: this.onChangeMonth,
+        monthLabels: this.props.monthLabels,
+        dateFormat: this.props.dateFormat });
+
+      var control = this.props.customControl ? _react2.default.cloneElement(this.props.customControl, {
+        onKeyDown: this.handleKeyDown,
+        value: this.state.inputValue || '',
+        required: this.props.required,
+        placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+        ref: 'input',
+        disabled: this.props.disabled,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onChange: this.handleInputChange,
+        className: this.props.className,
+        style: this.props.style,
+        autoComplete: this.props.autoComplete,
+        onInvalid: this.props.onInvalid,
+        noValidate: this.props.noValidate
+      }) : _react2.default.createElement(_FormControl2.default, {
+        onKeyDown: this.handleKeyDown,
+        value: this.state.inputValue || '',
+        required: this.props.required,
+        ref: 'input',
+        type: 'text',
+        className: this.props.className,
+        style: this.props.style,
+        autoFocus: this.props.autoFocus,
+        disabled: this.props.disabled,
+        placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onChange: this.handleInputChange,
+        autoComplete: this.props.autoComplete,
+        onInvalid: this.props.onInvalid,
+        noValidate: this.props.noValidate
+      });
+
+      return _react2.default.createElement(
+        _InputGroup2.default,
+        {
+          ref: 'inputGroup',
+          bsClass: this.props.showClearButton ? this.props.bsClass : '',
+          bsSize: this.props.bsSize,
+          id: this.props.id ? this.props.id + '_group' : null },
+        control,
+        _react2.default.createElement(
+          _Overlay2.default,
+          {
+            rootClose: true,
+            onHide: this.handleHide,
+            show: this.state.focused,
+            container: function container() {
+              return _this5.props.calendarContainer || _reactDom2.default.findDOMNode(_this5.refs.overlayContainer);
+            },
+            target: function target() {
+              return _reactDom2.default.findDOMNode(_this5.refs.input);
+            },
+            placement: this.state.calendarPlacement,
+            delayHide: 200 },
+          _react2.default.createElement(
+            _Popover2.default,
+            { id: 'date-picker-popover-' + this.props.instanceCount, className: 'date-picker-popover', title: calendarHeader },
+            _react2.default.createElement(Calendar, {
+              cellPadding: this.props.cellPadding,
+              selectedDate: this.state.selectedDate,
+              displayDate: this.state.displayDate,
+              onChange: this.onChangeDate,
+              dayLabels: this.state.dayLabels,
+              weekStartsOn: this.props.weekStartsOn,
+              showTodayButton: this.props.showTodayButton,
+              todayButtonLabel: this.props.todayButtonLabel,
+              minDate: this.props.minDate,
+              maxDate: this.props.maxDate,
+              roundedCorners: this.props.roundedCorners,
+              showWeeks: this.props.showWeeks
+            })
+          )
+        ),
+        _react2.default.createElement('div', { ref: 'overlayContainer', style: { position: 'relative' } }),
+        _react2.default.createElement('input', { ref: 'hiddenInput', type: 'hidden', id: this.props.id, name: this.props.name, value: this.state.value || '', 'data-formattedvalue': this.state.value ? this.state.inputValue : '' }),
+        this.props.showClearButton && !this.props.customControl && _react2.default.createElement(
+          _InputGroup2.default.Addon,
+          {
+            onClick: this.props.disabled ? null : this.clear,
+            style: { cursor: this.state.inputValue && !this.props.disabled ? 'pointer' : 'not-allowed' } },
+          _react2.default.createElement(
+            'div',
+            { style: { opacity: this.state.inputValue && !this.props.disabled ? 1 : 0.5 } },
+            this.props.clearButtonElement
+          )
+        ),
+        this.props.children
+      );
+    }
+  }]);
+
+  return _class;
+}(_react2.default.Component);
+
+_class.displayName = 'DatePicker';
+_class.propTypes = {
+  defaultValue: _propTypes2.default.string,
+  value: _propTypes2.default.string,
+  required: _propTypes2.default.bool,
+  className: _propTypes2.default.string,
+  style: _propTypes2.default.object,
+  minDate: _propTypes2.default.string,
+  maxDate: _propTypes2.default.string,
+  cellPadding: _propTypes2.default.string,
+  autoComplete: _propTypes2.default.string,
+  placeholder: _propTypes2.default.string,
+  dayLabels: _propTypes2.default.array,
+  monthLabels: _propTypes2.default.array,
+  onChange: _propTypes2.default.func,
+  onClear: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func,
+  onFocus: _propTypes2.default.func,
+  autoFocus: _propTypes2.default.bool,
+  disabled: _propTypes2.default.bool,
+  weekStartsOnMonday: function weekStartsOnMonday(props, propName, componentName) {
+    if (props[propName]) {
+      return new Error('Prop \'' + propName + '\' supplied to \'' + componentName + '\' is obsolete. Use \'weekStartsOn\' instead.');
+    }
   },
-  makeDateValues: function makeDateValues(isoString) {
+  weekStartsOn: _propTypes2.default.number,
+  clearButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  showClearButton: _propTypes2.default.bool,
+  previousButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  nextButtonElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
+  calendarPlacement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  dateFormat: _propTypes2.default.string, // 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'
+  bsClass: _propTypes2.default.string,
+  bsSize: _propTypes2.default.string,
+  calendarContainer: _propTypes2.default.object,
+  id: _propTypes2.default.string,
+  name: _propTypes2.default.string,
+  showTodayButton: _propTypes2.default.bool,
+  todayButtonLabel: _propTypes2.default.string,
+  instanceCount: _propTypes2.default.number,
+  customControl: _propTypes2.default.object,
+  roundedCorners: _propTypes2.default.bool,
+  showWeeks: _propTypes2.default.bool,
+  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]),
+  onInvalid: _propTypes2.default.func,
+  noValidate: _propTypes2.default.bool
+};
+
+_class.defaultProps = function () {
+  var language = typeof window !== 'undefined' && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
+  var dateFormat = !language || language === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
+  return {
+    cellPadding: '5px',
+    dayLabels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    monthLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    clearButtonElement: '×',
+    previousButtonElement: '<',
+    nextButtonElement: '>',
+    calendarPlacement: 'bottom',
+    dateFormat: dateFormat,
+    showClearButton: true,
+    autoFocus: false,
+    disabled: false,
+    showTodayButton: false,
+    todayButtonLabel: 'Today',
+    autoComplete: 'on',
+    showWeeks: false,
+    instanceCount: instanceCount++,
+    style: {
+      width: '100%'
+    },
+    roundedCorners: false,
+    noValidate: false
+  };
+}();
+
+var _initialiseProps = function _initialiseProps() {
+  var _this6 = this;
+
+  this.makeDateValues = function (isoString) {
     var displayDate = void 0;
     var selectedDate = isoString ? new Date(isoString.slice(0, 10) + 'T12:00:00.000Z') : null;
-    var minDate = this.props.minDate ? new Date(this.props.minDate.slice(0, 10) + 'T12:00:00.000Z') : null;
-    var maxDate = this.props.maxDate ? new Date(this.props.maxDate.slice(0, 10) + 'T12:00:00.000Z') : null;
+    var minDate = _this6.props.minDate ? new Date(_this6.props.minDate.slice(0, 10) + 'T12:00:00.000Z') : null;
+    var maxDate = _this6.props.maxDate ? new Date(_this6.props.maxDate.slice(0, 10) + 'T12:00:00.000Z') : null;
 
-    var inputValue = isoString ? this.makeInputValueString(selectedDate) : null;
+    var inputValue = isoString ? _this6.makeInputValueString(selectedDate) : null;
     if (selectedDate) {
       displayDate = new Date(selectedDate);
     } else {
@@ -420,109 +594,113 @@ exports.default = (0, _createReactClass2.default)({
       selectedDate: selectedDate,
       inputValue: inputValue
     };
-  },
-  clear: function clear() {
-    if (this.props.onClear) {
-      this.props.onClear();
+  };
+
+  this.clear = function () {
+    if (_this6.props.onClear) {
+      _this6.props.onClear();
     } else {
-      this.setState(this.makeDateValues(null));
+      _this6.setState(_this6.makeDateValues(null));
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(null, null);
+    if (_this6.props.onChange) {
+      _this6.props.onChange(null, null);
     }
-  },
-  handleHide: function handleHide() {
-    if (this.state.inputFocused) {
+  };
+
+  this.handleHide = function () {
+    if (_this6.state.inputFocused) {
       return;
     }
-    this.setState({
+    _this6.setState({
       focused: false
     });
-    if (this.props.onBlur) {
+    if (_this6.props.onBlur) {
       var event = document.createEvent('CustomEvent');
       event.initEvent('Change Date', true, false);
-      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
-      this.props.onBlur(event);
+      _reactDom2.default.findDOMNode(_this6.refs.hiddenInput).dispatchEvent(event);
+      _this6.props.onBlur(event);
     }
-  },
-  handleKeyDown: function handleKeyDown(e) {
-    if (e.which === 9 && this.state.inputFocused) {
-      this.setState({
+  };
+
+  this.handleKeyDown = function (e) {
+    if (e.which === 9 && _this6.state.inputFocused) {
+      _this6.setState({
         focused: false
       });
 
-      if (this.props.onBlur) {
+      if (_this6.props.onBlur) {
         var event = document.createEvent('CustomEvent');
         event.initEvent('Change Date', true, false);
-        _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
-        this.props.onBlur(event);
+        _reactDom2.default.findDOMNode(_this6.refs.hiddenInput).dispatchEvent(event);
+        _this6.props.onBlur(event);
       }
     }
-  },
-  handleFocus: function handleFocus() {
-    if (this.state.focused === true) {
+  };
+
+  this.handleFocus = function () {
+    if (_this6.state.focused === true) {
       return;
     }
 
-    var placement = this.getCalendarPlacement();
+    var placement = _this6.getCalendarPlacement();
 
-    this.setState({
+    _this6.setState({
       inputFocused: true,
       focused: true,
       calendarPlacement: placement
     });
 
-    if (this.props.onFocus) {
+    if (_this6.props.onFocus) {
       var event = document.createEvent('CustomEvent');
       event.initEvent('Change Date', true, false);
-      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
-      this.props.onFocus(event);
+      _reactDom2.default.findDOMNode(_this6.refs.hiddenInput).dispatchEvent(event);
+      _this6.props.onFocus(event);
     }
-  },
-  handleBlur: function handleBlur() {
-    this.setState({
+  };
+
+  this.handleBlur = function () {
+    _this6.setState({
       inputFocused: false
     });
-  },
+  };
 
+  this.getValue = function () {
+    return _this6.state.selectedDate ? _this6.state.selectedDate.toISOString() : null;
+  };
 
-  shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
-    return !(this.state.inputFocused === true && nextState.inputFocused === false);
-  },
+  this.getFormattedValue = function () {
+    return _this6.state.displayDate ? _this6.state.inputValue : null;
+  };
 
-  getValue: function getValue() {
-    return this.state.selectedDate ? this.state.selectedDate.toISOString() : null;
-  },
-  getFormattedValue: function getFormattedValue() {
-    return this.state.displayDate ? this.state.inputValue : null;
-  },
-  getCalendarPlacement: function getCalendarPlacement() {
-    var tag = Object.prototype.toString.call(this.props.calendarPlacement);
+  this.getCalendarPlacement = function () {
+    var tag = Object.prototype.toString.call(_this6.props.calendarPlacement);
     var isFunction = tag === '[object AsyncFunction]' || tag === '[object Function]' || tag === '[object GeneratorFunction]' || tag === '[object Proxy]';
     if (isFunction) {
-      return this.props.calendarPlacement();
+      return _this6.props.calendarPlacement();
     } else {
-      return this.props.calendarPlacement;
+      return _this6.props.calendarPlacement;
     }
-  },
-  makeInputValueString: function makeInputValueString(date) {
+  };
+
+  this.makeInputValueString = function (date) {
     var month = date.getMonth() + 1;
     var day = date.getDate();
 
     //this method is executed during intialState setup... handle a missing state properly
-    var separator = this.state ? this.state.separator : this.props.dateFormat.match(/[^A-Z]/)[0];
-    if (this.props.dateFormat.match(/MM.DD.YYYY/)) {
+    var separator = _this6.state ? _this6.state.separator : _this6.props.dateFormat.match(/[^A-Z]/)[0];
+    if (_this6.props.dateFormat.match(/MM.DD.YYYY/)) {
       return (month > 9 ? month : '0' + month) + separator + (day > 9 ? day : '0' + day) + separator + date.getFullYear();
-    } else if (this.props.dateFormat.match(/DD.MM.YYYY/)) {
+    } else if (_this6.props.dateFormat.match(/DD.MM.YYYY/)) {
       return (day > 9 ? day : '0' + day) + separator + (month > 9 ? month : '0' + month) + separator + date.getFullYear();
     } else {
       return date.getFullYear() + separator + (month > 9 ? month : '0' + month) + separator + (day > 9 ? day : '0' + day);
     }
-  },
-  handleBadInput: function handleBadInput(originalValue) {
-    var parts = originalValue.replace(new RegExp('[^0-9' + this.state.separator + ']'), '').split(this.state.separator);
-    if (this.props.dateFormat.match(/MM.DD.YYYY/) || this.props.dateFormat.match(/DD.MM.YYYY/)) {
+  };
+
+  this.handleBadInput = function (originalValue) {
+    var parts = originalValue.replace(new RegExp('[^0-9' + _this6.state.separator + ']'), '').split(_this6.state.separator);
+    if (_this6.props.dateFormat.match(/MM.DD.YYYY/) || _this6.props.dateFormat.match(/DD.MM.YYYY/)) {
       if (parts[0] && parts[0].length > 2) {
         parts[1] = parts[0].slice(2) + (parts[1] || '');
         parts[0] = parts[0].slice(0, 2);
@@ -547,34 +725,35 @@ exports.default = (0, _createReactClass2.default)({
         parts[2] = parts[2].slice(0, 2);
       }
     }
-    this.setState({
-      inputValue: parts.join(this.state.separator)
+    _this6.setState({
+      inputValue: parts.join(_this6.state.separator)
     });
-  },
-  handleInputChange: function handleInputChange() {
+  };
+
+  this.handleInputChange = function () {
 
-    var originalValue = _reactDom2.default.findDOMNode(this.refs.input).value;
-    var inputValue = originalValue.replace(/(-|\/\/)/g, this.state.separator).slice(0, 10);
+    var originalValue = _reactDom2.default.findDOMNode(_this6.refs.input).value;
+    var inputValue = originalValue.replace(/(-|\/\/)/g, _this6.state.separator).slice(0, 10);
 
     if (!inputValue) {
-      this.clear();
+      _this6.clear();
       return;
     }
 
     var month = void 0,
         day = void 0,
         year = void 0;
-    if (this.props.dateFormat.match(/MM.DD.YYYY/)) {
+    if (_this6.props.dateFormat.match(/MM.DD.YYYY/)) {
       if (!inputValue.match(/[0-1][0-9].[0-3][0-9].[1-2][0-9][0-9][0-9]/)) {
-        return this.handleBadInput(originalValue);
+        return _this6.handleBadInput(originalValue);
       }
 
       month = inputValue.slice(0, 2).replace(/[^0-9]/g, '');
       day = inputValue.slice(3, 5).replace(/[^0-9]/g, '');
       year = inputValue.slice(6, 10).replace(/[^0-9]/g, '');
-    } else if (this.props.dateFormat.match(/DD.MM.YYYY/)) {
+    } else if (_this6.props.dateFormat.match(/DD.MM.YYYY/)) {
       if (!inputValue.match(/[0-3][0-9].[0-1][0-9].[1-2][0-9][0-9][0-9]/)) {
-        return this.handleBadInput(originalValue);
+        return _this6.handleBadInput(originalValue);
       }
 
       day = inputValue.slice(0, 2).replace(/[^0-9]/g, '');
@@ -582,7 +761,7 @@ exports.default = (0, _createReactClass2.default)({
       year = inputValue.slice(6, 10).replace(/[^0-9]/g, '');
     } else {
       if (!inputValue.match(/[1-2][0-9][0-9][0-9].[0-1][0-9].[0-3][0-9]/)) {
-        return this.handleBadInput(originalValue);
+        return _this6.handleBadInput(originalValue);
       }
 
       year = inputValue.slice(0, 4).replace(/[^0-9]/g, '');
@@ -594,34 +773,36 @@ exports.default = (0, _createReactClass2.default)({
     var dayInteger = parseInt(day, 10);
     var yearInteger = parseInt(year, 10);
     if (monthInteger > 12 || dayInteger > 31) {
-      return this.handleBadInput(originalValue);
+      return _this6.handleBadInput(originalValue);
     }
 
     if (!isNaN(monthInteger) && !isNaN(dayInteger) && !isNaN(yearInteger) && monthInteger <= 12 && dayInteger <= 31 && yearInteger > 999) {
       var selectedDate = new Date(yearInteger, monthInteger - 1, dayInteger, 12, 0, 0, 0);
-      this.setState({
+      _this6.setState({
         selectedDate: selectedDate,
         displayDate: selectedDate,
         value: selectedDate.toISOString()
       });
 
-      if (this.props.onChange) {
-        this.props.onChange(selectedDate.toISOString(), inputValue);
+      if (_this6.props.onChange) {
+        _this6.props.onChange(selectedDate.toISOString(), inputValue);
       }
     }
 
-    this.setState({
+    _this6.setState({
       inputValue: inputValue
     });
-  },
-  onChangeMonth: function onChangeMonth(newDisplayDate) {
-    this.setState({
+  };
+
+  this.onChangeMonth = function (newDisplayDate) {
+    _this6.setState({
       displayDate: newDisplayDate
     });
-  },
-  onChangeDate: function onChangeDate(newSelectedDate) {
-    var inputValue = this.makeInputValueString(newSelectedDate);
-    this.setState({
+  };
+
+  this.onChangeDate = function (newSelectedDate) {
+    var inputValue = _this6.makeInputValueString(newSelectedDate);
+    _this6.setState({
       inputValue: inputValue,
       selectedDate: newSelectedDate,
       displayDate: newSelectedDate,
@@ -629,126 +810,18 @@ exports.default = (0, _createReactClass2.default)({
       focused: false
     });
 
-    if (this.props.onBlur) {
+    if (_this6.props.onBlur) {
       var event = document.createEvent('CustomEvent');
       event.initEvent('Change Date', true, false);
-      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
-      this.props.onBlur(event);
+      _reactDom2.default.findDOMNode(_this6.refs.hiddenInput).dispatchEvent(event);
+      _this6.props.onBlur(event);
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(newSelectedDate.toISOString(), inputValue);
+    if (_this6.props.onChange) {
+      _this6.props.onChange(newSelectedDate.toISOString(), inputValue);
     }
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(newProps) {
-    var value = newProps.value;
-    if (this.getValue() !== value) {
-      this.setState(this.makeDateValues(value));
-    }
-  },
-  render: function render() {
-    var _this2 = this;
-
-    var calendarHeader = _react2.default.createElement(CalendarHeader, {
-      previousButtonElement: this.props.previousButtonElement,
-      nextButtonElement: this.props.nextButtonElement,
-      displayDate: this.state.displayDate,
-      minDate: this.props.minDate,
-      maxDate: this.props.maxDate,
-      onChange: this.onChangeMonth,
-      monthLabels: this.props.monthLabels,
-      dateFormat: this.props.dateFormat });
-
-    var control = this.props.customControl ? _react2.default.cloneElement(this.props.customControl, {
-      onKeyDown: this.handleKeyDown,
-      value: this.state.inputValue || '',
-      required: this.props.required,
-      placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
-      ref: 'input',
-      disabled: this.props.disabled,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onChange: this.handleInputChange,
-      className: this.props.className,
-      style: this.props.style,
-      autoComplete: this.props.autoComplete,
-      onInvalid: this.props.onInvalid,
-      noValidate: this.props.noValidate
-    }) : _react2.default.createElement(_FormControl2.default, {
-      onKeyDown: this.handleKeyDown,
-      value: this.state.inputValue || '',
-      required: this.props.required,
-      ref: 'input',
-      type: 'text',
-      className: this.props.className,
-      style: this.props.style,
-      autoFocus: this.props.autoFocus,
-      disabled: this.props.disabled,
-      placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onChange: this.handleInputChange,
-      autoComplete: this.props.autoComplete,
-      onInvalid: this.props.onInvalid,
-      noValidate: this.props.noValidate
-    });
+  };
+};
 
-    return _react2.default.createElement(
-      _InputGroup2.default,
-      {
-        ref: 'inputGroup',
-        bsClass: this.props.showClearButton ? this.props.bsClass : '',
-        bsSize: this.props.bsSize,
-        id: this.props.id ? this.props.id + '_group' : null },
-      control,
-      _react2.default.createElement(
-        _Overlay2.default,
-        {
-          rootClose: true,
-          onHide: this.handleHide,
-          show: this.state.focused,
-          container: function container() {
-            return _this2.props.calendarContainer || _reactDom2.default.findDOMNode(_this2.refs.overlayContainer);
-          },
-          target: function target() {
-            return _reactDom2.default.findDOMNode(_this2.refs.input);
-          },
-          placement: this.state.calendarPlacement,
-          delayHide: 200 },
-        _react2.default.createElement(
-          _Popover2.default,
-          { id: 'date-picker-popover-' + this.props.instanceCount, className: 'date-picker-popover', title: calendarHeader },
-          _react2.default.createElement(Calendar, {
-            cellPadding: this.props.cellPadding,
-            selectedDate: this.state.selectedDate,
-            displayDate: this.state.displayDate,
-            onChange: this.onChangeDate,
-            dayLabels: this.state.dayLabels,
-            weekStartsOn: this.props.weekStartsOn,
-            showTodayButton: this.props.showTodayButton,
-            todayButtonLabel: this.props.todayButtonLabel,
-            minDate: this.props.minDate,
-            maxDate: this.props.maxDate,
-            roundedCorners: this.props.roundedCorners,
-            showWeeks: this.props.showWeeks
-          })
-        )
-      ),
-      _react2.default.createElement('div', { ref: 'overlayContainer', style: { position: 'relative' } }),
-      _react2.default.createElement('input', { ref: 'hiddenInput', type: 'hidden', id: this.props.id, name: this.props.name, value: this.state.value || '', 'data-formattedvalue': this.state.value ? this.state.inputValue : '' }),
-      this.props.showClearButton && !this.props.customControl && _react2.default.createElement(
-        _InputGroup2.default.Addon,
-        {
-          onClick: this.props.disabled ? null : this.clear,
-          style: { cursor: this.state.inputValue && !this.props.disabled ? 'pointer' : 'not-allowed' } },
-        _react2.default.createElement(
-          'div',
-          { style: { opacity: this.state.inputValue && !this.props.disabled ? 1 : 0.5 } },
-          this.props.clearButtonElement
-        )
-      ),
-      this.props.children
-    );
-  }
-});
+exports.default = _class;
 module.exports = exports['default'];
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index 1ac50bf..45f3f72 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -8,14 +8,13 @@ import InputGroup from 'react-bootstrap/lib/InputGroup';
 import Overlay from 'react-bootstrap/lib/Overlay';
 import Popover from 'react-bootstrap/lib/Popover';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
 let instanceCount = 0;
 
-const CalendarHeader = createReactClass({
-  displayName: 'DatePickerHeader',
+class CalendarHeader extends React.Component {
+  static displayName = 'DatePickerHeader';
 
-  propTypes: {
+  static propTypes = {
     displayDate: PropTypes.object.isRequired,
     minDate: PropTypes.string,
     maxDate: PropTypes.string,
@@ -29,37 +28,37 @@ const CalendarHeader = createReactClass({
       PropTypes.string,
       PropTypes.object
     ]).isRequired,
-  },
+  };
 
-  displayingMinMonth() {
+  displayingMinMonth = () => {
     if (!this.props.minDate) return false;
 
     const displayDate = new Date(this.props.displayDate);
     const minDate = new Date(this.props.minDate);
     return minDate.getFullYear() == displayDate.getFullYear() && minDate.getMonth() == displayDate.getMonth();
-  },
+  };
 
-  displayingMaxMonth() {
+  displayingMaxMonth = () => {
     if (!this.props.maxDate) return false;
 
     const displayDate = new Date(this.props.displayDate);
     const maxDate = new Date(this.props.maxDate);
     return maxDate.getFullYear() == displayDate.getFullYear() && maxDate.getMonth() == displayDate.getMonth();
-  },
+  };
 
-  handleClickPrevious() {
+  handleClickPrevious = () => {
     const newDisplayDate = new Date(this.props.displayDate);
     newDisplayDate.setDate(1);
     newDisplayDate.setMonth(newDisplayDate.getMonth() - 1);
     this.props.onChange(newDisplayDate);
-  },
+  };
 
-  handleClickNext() {
+  handleClickNext = () => {
     const newDisplayDate = new Date(this.props.displayDate);
     newDisplayDate.setDate(1);
     newDisplayDate.setMonth(newDisplayDate.getMonth() + 1);
     this.props.onChange(newDisplayDate);
-  },
+  };
 
   render() {
     return <div className="text-center">
@@ -72,14 +71,14 @@ const CalendarHeader = createReactClass({
       </div>
     </div>;
   }
-});
+}
 
 const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
-const Calendar = createReactClass({
-  displayName: 'DatePickerCalendar',
+class Calendar extends React.Component {
+  static displayName = 'DatePickerCalendar';
 
-  propTypes: {
+  static propTypes = {
     selectedDate: PropTypes.object,
     displayDate: PropTypes.object.isRequired,
     minDate: PropTypes.string,
@@ -92,29 +91,29 @@ const Calendar = createReactClass({
     todayButtonLabel: PropTypes.string,
     roundedCorners: PropTypes.bool,
     showWeeks: PropTypes.bool
-  },
+  };
 
-  handleClick(e) {
+  handleClick = (e) => {
     const day = e.currentTarget.getAttribute('data-day');
     const newSelectedDate = this.setTimeToNoon(new Date(this.props.displayDate));
     newSelectedDate.setDate(day);
     this.props.onChange(newSelectedDate);
-  },
+  };
 
-  handleClickToday() {
+  handleClickToday = () => {
     const newSelectedDate = this.setTimeToNoon(new Date());
     this.props.onChange(newSelectedDate);
-  },
+  };
 
-  setTimeToNoon(date) {
+  setTimeToNoon = (date) => {
     date.setHours(12);
     date.setMinutes(0);
     date.setSeconds(0);
     date.setMilliseconds(0);
     return date;
-  },
+  };
 
-  getWeekNumber(date){
+  getWeekNumber = (date) => {
     const target  = new Date(date.valueOf());
     const dayNr   = (date.getDay() + 6) % 7;
     target.setDate(target.getDate() - dayNr + 3);
@@ -124,7 +123,7 @@ const Calendar = createReactClass({
       target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
     }
     return 1 + Math.ceil((firstThursday - target) / 604800000);
-  },
+  };
 
   render() {
     const currentDate = this.setTimeToNoon(new Date());
@@ -243,12 +242,12 @@ const Calendar = createReactClass({
       </tfoot>}
     </table>;
   }
-});
+}
 
-export default createReactClass({
-  displayName: 'DatePicker',
+export default class extends React.Component {
+  static displayName = 'DatePicker';
 
-  propTypes: {
+  static propTypes = {
     defaultValue: PropTypes.string,
     value: PropTypes.string,
     required: PropTypes.bool,
@@ -309,9 +308,9 @@ export default createReactClass({
     ]),
     onInvalid: PropTypes.func,
     noValidate: PropTypes.bool
-  },
+  };
 
-  getDefaultProps() {
+  static defaultProps = function() {
     const language = typeof window !== 'undefined' && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
     const dateFormat = !language || language === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
     return {
@@ -339,30 +338,31 @@ export default createReactClass({
       roundedCorners: false,
       noValidate: false
     };
-  },
+  }();
 
-  getInitialState() {
-    if (this.props.value && this.props.defaultValue) {
+  constructor(props, context) {
+    super(props, context);
+    if (props.value && props.defaultValue) {
       throw new Error('Conflicting DatePicker properties \'value\' and \'defaultValue\'');
     }
-    const state = this.makeDateValues(this.props.value || this.props.defaultValue);
-    if (this.props.weekStartsOn > 1) {
-      state.dayLabels = this.props.dayLabels
-        .slice(this.props.weekStartsOn)
-        .concat(this.props.dayLabels.slice(0, this.props.weekStartsOn));
-    } else if (this.props.weekStartsOn === 1) {
-      state.dayLabels = this.props.dayLabels.slice(1).concat(this.props.dayLabels.slice(0,1));
+    const state = this.makeDateValues(props.value || props.defaultValue);
+    if (props.weekStartsOn > 1) {
+      state.dayLabels = props.dayLabels
+        .slice(props.weekStartsOn)
+        .concat(props.dayLabels.slice(0, props.weekStartsOn));
+    } else if (props.weekStartsOn === 1) {
+      state.dayLabels = props.dayLabels.slice(1).concat(props.dayLabels.slice(0,1));
     } else {
-      state.dayLabels = this.props.dayLabels;
+      state.dayLabels = props.dayLabels;
     }
     state.focused = false;
     state.inputFocused = false;
-    state.placeholder = this.props.placeholder || this.props.dateFormat;
-    state.separator = this.props.dateFormat.match(/[^A-Z]/)[0];
-    return state;
-  },
+    state.placeholder = props.placeholder || props.dateFormat;
+    state.separator = props.dateFormat.match(/[^A-Z]/)[0];
+    this.state = state;
+  }
 
-  makeDateValues(isoString) {
+  makeDateValues = (isoString) => {
     let displayDate;
     const selectedDate = isoString ? new Date(`${isoString.slice(0,10)}T12:00:00.000Z`) : null;
     const minDate = this.props.minDate ? new Date(`${this.props.minDate.slice(0,10)}T12:00:00.000Z`) : null;
@@ -388,9 +388,9 @@ export default createReactClass({
       selectedDate: selectedDate,
       inputValue: inputValue
     };
-  },
+  };
 
-  clear() {
+  clear = () => {
     if (this.props.onClear) {
       this.props.onClear();
     }
@@ -401,9 +401,9 @@ export default createReactClass({
     if (this.props.onChange) {
       this.props.onChange(null, null);
     }
-  },
+  };
 
-  handleHide() {
+  handleHide = () => {
     if (this.state.inputFocused) {
       return;
     }
@@ -416,9 +416,9 @@ export default createReactClass({
       ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
       this.props.onBlur(event);
     }
-  },
+  };
 
-  handleKeyDown(e) {
+  handleKeyDown = (e) => {
     if (e.which === 9 && this.state.inputFocused) {
       this.setState({
         focused: false
@@ -431,9 +431,9 @@ export default createReactClass({
         this.props.onBlur(event);
       }
     }
-  },
+  };
 
-  handleFocus() {
+  handleFocus = () => {
     if (this.state.focused === true) {
       return;
     }
@@ -452,27 +452,27 @@ export default createReactClass({
       ReactDOM.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
       this.props.onFocus(event);
     }
-  },
+  };
 
-  handleBlur() {
+  handleBlur = () => {
     this.setState({
       inputFocused: false
     });
-  },
+  };
 
-  shouldComponentUpdate: function(nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return !(this.state.inputFocused === true && nextState.inputFocused === false);
-  },
+  }
 
-  getValue() {
+  getValue = () => {
     return this.state.selectedDate ? this.state.selectedDate.toISOString() : null;
-  },
+  };
 
-  getFormattedValue() {
+  getFormattedValue = () => {
     return this.state.displayDate ? this.state.inputValue : null;
-  },
+  };
 
-  getCalendarPlacement() {
+  getCalendarPlacement = () => {
     const tag = Object.prototype.toString.call(this.props.calendarPlacement);
     const isFunction = tag === '[object AsyncFunction]' || tag === '[object Function]' || tag === '[object GeneratorFunction]' || tag === '[object Proxy]';
     if (isFunction) {
@@ -481,9 +481,9 @@ export default createReactClass({
     else {
       return this.props.calendarPlacement;
     }
-  },
+  };
 
-  makeInputValueString(date) {
+  makeInputValueString = (date) => {
     const month = date.getMonth() + 1;
     const day = date.getDate();
 
@@ -498,9 +498,9 @@ export default createReactClass({
     else {
       return date.getFullYear() + separator + (month > 9 ? month : `0${month}`) + separator + (day > 9 ? day : `0${day}`);
     }
-  },
+  };
 
-  handleBadInput(originalValue) {
+  handleBadInput = (originalValue) => {
     const parts = originalValue.replace(new RegExp(`[^0-9${this.state.separator}]`), '').split(this.state.separator);
     if (this.props.dateFormat.match(/MM.DD.YYYY/) || this.props.dateFormat.match(/DD.MM.YYYY/)) {
       if (parts[0] && parts[0].length > 2) {
@@ -530,9 +530,9 @@ export default createReactClass({
     this.setState({
       inputValue: parts.join(this.state.separator)
     });
-  },
+  };
 
-  handleInputChange() {
+  handleInputChange = () => {
 
     const originalValue = ReactDOM.findDOMNode(this.refs.input).value;
     const inputValue = originalValue.replace(/(-|\/\/)/g, this.state.separator).slice(0,10);
@@ -592,15 +592,15 @@ export default createReactClass({
     this.setState({
       inputValue: inputValue
     });
-  },
+  };
 
-  onChangeMonth(newDisplayDate) {
+  onChangeMonth = (newDisplayDate) => {
     this.setState({
       displayDate: newDisplayDate
     });
-  },
+  };
 
-  onChangeDate(newSelectedDate) {
+  onChangeDate = (newSelectedDate) => {
     const inputValue = this.makeInputValueString(newSelectedDate);
     this.setState({
       inputValue: inputValue,
@@ -620,14 +620,14 @@ export default createReactClass({
     if (this.props.onChange) {
       this.props.onChange(newSelectedDate.toISOString(), inputValue);
     }
-  },
+  };
 
   componentWillReceiveProps(newProps) {
     const value = newProps.value;
     if (this.getValue() !== value) {
       this.setState(this.makeDateValues(value));
     }
-  },
+  }
 
   render() {
     const calendarHeader = <CalendarHeader
@@ -719,4 +719,4 @@ export default createReactClass({
       {this.props.children}
     </InputGroup>;
   }
-});
+}