Merge branch 'master' of https://github.com/1stQuad/react-bootstrap-datetimepicker

Author: Dzmitry Verasau

css/bootstrap-datetimepicker.css

@@ -2,7 +2,7 @@
  * Datetimepicker for Bootstrap v3
  * https://github.com/Eonasdan/bootstrap-datetimepicker/
  */
-.bootstrap-datetimepicker-widget {
+ .bootstrap-datetimepicker-widget {
   top: 0;
   left: 0;
   width: 250px;
@@ -225,6 +225,14 @@
   position: relative;
 }
 
+.bootstrap-datetimepicker-wrap .input-group-addon {
+  position: absolute;
+  right: 5px;
+  top: 4px;
+  bottom: 4px;
+  opacity: 0.5;
+  cursor: pointer;
+}
 .bootstrap-datetimepicker-wrap.is-invalid ~ .invalid-feedback{
   display: block;
 }
@@ -275,4 +283,21 @@
 
 .bootstrap-datetimepicker-widget .btn-today{
   padding: 3px 0;
+}
+.bootstrap-datetimepicker-widget.bottom {
+  top: 100%;
+  bottom: unset;
+}
+
+.bootstrap-datetimepicker-widget.bottom.dropdown-menu {
+  margin-top: 6px;
+}
+
+.bootstrap-datetimepicker-widget.top {
+  top: unset;
+  bottom: 100%;
+}
+
+.bootstrap-datetimepicker-widget.top.dropdown-menu {
+  margin-bottom: 6px;
 }

lib/DateTimeField.js

@@ -355,27 +355,38 @@ var DateTimeField = (function (_Component) {
         };
 
         this.calculatePosition = function (options) {
-            var classes = undefined,
-                styles = undefined;
+            var classes = {};
+            var styles = {
+                display: 'block',
+                position: 'absolute'
+            };
 
-            classes = {};
             if (options) {
                 classes['months'] = options.monthsDisplayed;
                 classes['years'] = options.yearsDisplayed;
                 classes['days'] = options.daysDisplayed;
                 classes['time'] = options.timeDisplayed;
             }
-            if (_this.props.direction === 'up' || _this.props.direction === 'auto') {
+
+            var wrapRect = _this.wrapper.getBoundingClientRect();
+            var widgetRect = _this.widget.getBoundingClientRect();
+            var widgetHeight = widgetRect.height;
+            var fitTop = wrapRect.top - widgetHeight >= 0;
+            var fitBottom = document.documentElement.clientHeight > wrapRect.bottom + widgetHeight;
+
+            var placement = _this.props.direction === 'up' || _this.props.direction === 'auto' ? 'top' : 'bottom';
+            var top = placement === 'top' && fitTop || placement === 'bottom' && !fitBottom;
+            var bottom = placement === 'bottom' && fitBottom || placement === 'top' && !fitTop;
+
+            if (top) {
                 classes.top = true;
                 classes.bottom = false;
-            } else {
+            }
+            if (bottom) {
                 classes.top = false;
                 classes.bottom = true;
             }
-            styles = {
-                display: 'block',
-                position: 'absolute'
-            };
+
             return _this.setState({
                 widgetStyle: styles,
                 widgetClasses: classes
@@ -538,8 +549,8 @@ var DateTimeField = (function (_Component) {
                     minDate: this.props.minDate,
                     mode: this.props.mode,
                     unlimited: this.props.unlimited,
-                    ref: function (el) {
-                        _this2.widget = el;
+                    widgetRef: function (el) {
+                        return _this2.widget = el;
                     },
                     selectedDate: this.state.selectedDate,
                     setSelectedMonth: this.setSelectedMonth,

lib/DateTimePicker.js

@@ -158,7 +158,7 @@ var DateTimePicker = (function (_Component) {
 
             return _react2['default'].createElement(
                 'div',
-                { className: widgetClass, style: this.props.widgetStyle },
+                { ref: this.props.widgetRef, className: widgetClass, style: this.props.widgetStyle },
                 _react2['default'].createElement(
                     'ul',
                     { className: 'list-unstyled' },
@@ -203,6 +203,7 @@ var DateTimePicker = (function (_Component) {
             widgetClasses: _propTypes2['default'].object,
             widgetStyle: _propTypes2['default'].object,
             togglePicker: _propTypes2['default'].func,
+            widgetRef: _propTypes2['default'].func,
             setSelectedHour: _propTypes2['default'].func,
             setSelectedMinute: _propTypes2['default'].func,
             setToday: _propTypes2['default'].func,

src/DateTimeField.js

@@ -520,27 +520,38 @@ export default class DateTimeField extends Component {
     };
 
     calculatePosition = options => {
-        let classes,
-            styles;
+        let classes = {};
+        let styles = {
+            display: 'block',
+            position: 'absolute'
+        };
 
-        classes = {};
         if (options) {
             classes['months'] = options.monthsDisplayed;
             classes['years'] = options.yearsDisplayed;
             classes['days'] = options.daysDisplayed;
             classes['time'] = options.timeDisplayed;
         }
-        if (this.props.direction === 'up' || this.props.direction === 'auto') {
+
+        const wrapRect = this.wrapper.getBoundingClientRect();
+        const widgetRect = this.widget.getBoundingClientRect();
+        const widgetHeight = widgetRect.height;
+        const fitTop = wrapRect.top - widgetHeight >= 0;
+        const fitBottom = document.documentElement.clientHeight > wrapRect.bottom + widgetHeight;
+
+        const placement = this.props.direction === 'up' || this.props.direction === 'auto' ? 'top' : 'bottom';
+        const top = placement === 'top' && fitTop || placement === 'bottom' && !fitBottom;
+        const bottom = placement === 'bottom' && fitBottom || placement === 'top' && !fitTop;
+
+        if (top) {
             classes.top = true;
             classes.bottom = false;
-        } else {
+        }
+        if (bottom) {
             classes.top = false;
             classes.bottom = true;
         }
-        styles = {
-            display: 'block',
-            position: 'absolute',
-        };
+
         return this.setState({
             widgetStyle: styles,
             widgetClasses: classes,
@@ -633,9 +644,7 @@ export default class DateTimeField extends Component {
                     minDate={this.props.minDate}
                     mode={this.props.mode}
                     unlimited={this.props.unlimited}
-                    ref={el => {
-                        this.widget = el;
-                    }}
+                    widgetRef={el => this.widget = el}
                     selectedDate={this.state.selectedDate}
                     setSelectedMonth={this.setSelectedMonth}
                     setSelectedDate={this.setSelectedDate}

src/DateTimePicker.js

@@ -44,6 +44,7 @@ export default class DateTimePicker extends Component {
         widgetClasses: PropTypes.object,
         widgetStyle: PropTypes.object,
         togglePicker: PropTypes.func,
+        widgetRef: PropTypes.func,
         setSelectedHour: PropTypes.func,
         setSelectedMinute: PropTypes.func,
         setToday: PropTypes.func,
@@ -163,7 +164,7 @@ export default class DateTimePicker extends Component {
         if (this.props.disabled) return ('');
 
         return (
-            <div className={widgetClass} style={this.props.widgetStyle}>
+            <div ref={this.props.widgetRef} className={widgetClass} style={this.props.widgetStyle}>
                 <ul className="list-unstyled">
                     {this.renderDatePicker()}