primereact 6.6.0 → 7.0.1

package/calendar/calendar.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.calendar = (function (exports, React, inputtext, button, core, PrimeReact) {
+this.primereact.calendar = (function (exports, React, inputtext, button, csstransition, portal, utils, tooltip, ripple, PrimeReact, overlayservice) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -133,6 +133,8 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
   function _possibleConstructorReturn(self, call) {
     if (call && (_typeof(call) === "object" || typeof call === "function")) {
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
 
     return _assertThisInitialized(self);
@@ -178,7 +180,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     _createClass(CalendarPanelComponent, [{
       key: "renderElement",
       value: function renderElement() {
-        return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+        return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
           nodeRef: this.props.forwardRef,
           classNames: "p-connected-overlay",
           in: this.props.in,
@@ -192,18 +194,19 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onEntered: this.props.onEntered,
           onExit: this.props.onExit,
           onExited: this.props.onExited
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           ref: this.props.forwardRef,
           className: this.props.className,
           style: this.props.style,
-          onClick: this.props.onClick
+          onClick: this.props.onClick,
+          onMouseUp: this.props.onMouseUp
         }, this.props.children));
       }
     }, {
       key: "render",
       value: function render() {
         var element = this.renderElement();
-        return this.props.inline ? element : /*#__PURE__*/React__default['default'].createElement(core.Portal, {
+        return this.props.inline ? element : /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
           element: element,
           appendTo: this.props.appendTo
         });
@@ -219,8 +222,8 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     className: null
   });
 
-  var CalendarPanel = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
-    return /*#__PURE__*/React__default['default'].createElement(CalendarPanelComponent, _extends({
+  var CalendarPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    return /*#__PURE__*/React__default["default"].createElement(CalendarPanelComponent, _extends({
       forwardRef: ref
     }, props));
   });
@@ -255,13 +258,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       };
 
       if (!_this.props.onViewDateChange) {
-        var propValue = _this.props.value;
-
-        if (Array.isArray(propValue)) {
-          propValue = propValue[0];
-        }
-
-        var viewDate = _this.props.viewDate && _this.isValidDate(_this.props.viewDate) ? _this.props.viewDate : propValue && _this.isValidDate(propValue) ? propValue : new Date();
+        var viewDate = _this.getViewDate(_this.props.viewDate);
 
         _this.validateDate(viewDate);
 
@@ -283,6 +280,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       _this.onTodayButtonClick = _this.onTodayButtonClick.bind(_assertThisInitialized(_this));
       _this.onClearButtonClick = _this.onClearButtonClick.bind(_assertThisInitialized(_this));
       _this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
+      _this.onPanelMouseUp = _this.onPanelMouseUp.bind(_assertThisInitialized(_this));
       _this.incrementHour = _this.incrementHour.bind(_assertThisInitialized(_this));
       _this.decrementHour = _this.decrementHour.bind(_assertThisInitialized(_this));
       _this.incrementMinute = _this.incrementMinute.bind(_assertThisInitialized(_this));
@@ -330,7 +328,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         if (this.props.inline) {
           this.initFocusableCell();
         } else if (this.props.mask) {
-          core.mask(this.inputRef.current, {
+          utils.mask(this.inputRef.current, {
             mask: this.props.mask,
             readOnly: this.props.readOnlyInput || this.props.disabled,
             onChange: function onChange(e) {
@@ -411,12 +409,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           this.scrollHandler = null;
         }
 
-        core.ZIndexUtils.clear(this.overlayRef.current);
+        utils.ZIndexUtils.clear(this.overlayRef.current);
       }
     }, {
       key: "renderTooltip",
       value: function renderTooltip() {
-        this.tooltip = core.tip({
+        this.tooltip = tooltip.tip({
           target: this.inputRef.current,
           content: this.props.tooltip,
           options: this.props.tooltipOptions
@@ -567,7 +565,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             isValid = false;
           }
         } else if (value.every(function (v) {
-          return _this7.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && _this7.isSelectableTime(value);
+          return _this7.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && _this7.isSelectableTime(v);
         })) {
           if (this.isRangeSelection()) {
             isValid = value.length > 1 && value[1] > value[0] ? true : false;
@@ -623,7 +621,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "trapFocus",
       value: function trapFocus(event) {
         event.preventDefault();
-        var focusableElements = core.DomHandler.getFocusableElements(this.overlayRef.current);
+        var focusableElements = utils.DomHandler.getFocusableElements(this.overlayRef.current);
 
         if (focusableElements && focusableElements.length > 0) {
           if (!document.activeElement) {
@@ -647,13 +645,13 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         if (this.navigation) {
           if (this.navigation.button) {
             this.initFocusableCell();
-            if (this.navigation.backward) core.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-prev').focus();else core.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-next').focus();
+            if (this.navigation.backward) utils.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-prev').focus();else utils.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-next').focus();
           } else {
             if (this.navigation.backward) {
-              var cells = core.DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
+              var cells = utils.DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
               cell = cells[cells.length - 1];
             } else {
-              cell = core.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
+              cell = utils.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
             }
 
             if (cell) {
@@ -673,18 +671,18 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var cell;
 
         if (this.view === 'month') {
-          var cells = core.DomHandler.find(this.overlayRef.current, '.p-monthpicker .p-monthpicker-month');
-          var selectedCell = core.DomHandler.findSingle(this.overlayRef.current, '.p-monthpicker .p-monthpicker-month.p-highlight');
+          var cells = utils.DomHandler.find(this.overlayRef.current, '.p-monthpicker .p-monthpicker-month');
+          var selectedCell = utils.DomHandler.findSingle(this.overlayRef.current, '.p-monthpicker .p-monthpicker-month.p-highlight');
           cells.forEach(function (cell) {
             return cell.tabIndex = -1;
           });
           cell = selectedCell || cells[0];
         } else {
-          cell = core.DomHandler.findSingle(this.overlayRef.current, 'span.p-highlight');
+          cell = utils.DomHandler.findSingle(this.overlayRef.current, 'span.p-highlight');
 
           if (!cell) {
-            var todayCell = core.DomHandler.findSingle(this.overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
-            if (todayCell) cell = todayCell;else cell = core.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
+            var todayCell = utils.DomHandler.findSingle(this.overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
+            if (todayCell) cell = todayCell;else cell = utils.DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)');
           }
         }
 
@@ -819,12 +817,17 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "onPanelClick",
       value: function onPanelClick(event) {
         if (!this.props.inline) {
-          core.OverlayService.emit('overlay-click', {
+          overlayservice.OverlayService.emit('overlay-click', {
             originalEvent: event,
             target: this.container
           });
         }
       }
+    }, {
+      key: "onPanelMouseUp",
+      value: function onPanelMouseUp(event) {
+        this.onPanelClick(event);
+      }
     }, {
       key: "onTimePickerElementMouseDown",
       value: function onTimePickerElementMouseDown(event, type, direction) {
@@ -1099,8 +1102,15 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       }
     }, {
       key: "getViewDate",
-      value: function getViewDate() {
-        return this.props.onViewDateChange ? this.props.viewDate : this.state.viewDate;
+      value: function getViewDate(date) {
+        var propValue = this.props.value;
+        var viewDate = date || (this.props.onViewDateChange ? this.props.viewDate : this.state.viewDate);
+
+        if (Array.isArray(propValue)) {
+          propValue = propValue[0];
+        }
+
+        return viewDate && this.isValidDate(viewDate) ? viewDate : propValue && this.isValidDate(propValue) ? propValue : new Date();
       }
     }, {
       key: "getCurrentDateTime",
@@ -1312,13 +1322,13 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           case 40:
             {
               cellContent.tabIndex = '-1';
-              var cellIndex = core.DomHandler.index(cell);
+              var cellIndex = utils.DomHandler.index(cell);
               var nextRow = cell.parentElement.nextElementSibling;
 
               if (nextRow) {
                 var focusCell = nextRow.children[cellIndex].children[0];
 
-                if (core.DomHandler.hasClass(focusCell, 'p-disabled')) {
+                if (utils.DomHandler.hasClass(focusCell, 'p-disabled')) {
                   this.navigation = {
                     backward: false
                   };
@@ -1343,14 +1353,14 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             {
               cellContent.tabIndex = '-1';
 
-              var _cellIndex = core.DomHandler.index(cell);
+              var _cellIndex = utils.DomHandler.index(cell);
 
               var prevRow = cell.parentElement.previousElementSibling;
 
               if (prevRow) {
                 var _focusCell = prevRow.children[_cellIndex].children[0];
 
-                if (core.DomHandler.hasClass(_focusCell, 'p-disabled')) {
+                if (utils.DomHandler.hasClass(_focusCell, 'p-disabled')) {
                   this.navigation = {
                     backward: true
                   };
@@ -1380,7 +1390,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               if (prevCell) {
                 var _focusCell2 = prevCell.children[0];
 
-                if (core.DomHandler.hasClass(_focusCell2, 'p-disabled')) {
+                if (utils.DomHandler.hasClass(_focusCell2, 'p-disabled')) {
                   this.navigateToMonth(true, groupIndex, event);
                 } else {
                   _focusCell2.tabIndex = '0';
@@ -1404,7 +1414,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               if (nextCell) {
                 var _focusCell3 = nextCell.children[0];
 
-                if (core.DomHandler.hasClass(_focusCell3, 'p-disabled')) {
+                if (utils.DomHandler.hasClass(_focusCell3, 'p-disabled')) {
                   this.navigateToMonth(false, groupIndex, event);
                 } else {
                   _focusCell3.tabIndex = '0';
@@ -1454,7 +1464,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             this.navBackward(event);
           } else {
             var prevMonthContainer = this.overlayRef.current.children[groupIndex - 1];
-            var cells = core.DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
+            var cells = utils.DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
             var focusCell = cells[cells.length - 1];
             focusCell.tabIndex = '0';
             focusCell.focus();
@@ -1468,7 +1478,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           } else {
             var nextMonthContainer = this.overlayRef.current.children[groupIndex + 1];
 
-            var _focusCell4 = core.DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
+            var _focusCell4 = utils.DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
 
             _focusCell4.tabIndex = '0';
 
@@ -1488,7 +1498,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             {
               cell.tabIndex = '-1';
               var cells = cell.parentElement.children;
-              var cellIndex = core.DomHandler.index(cell);
+              var cellIndex = utils.DomHandler.index(cell);
               var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
 
               if (nextCell) {
@@ -1565,7 +1575,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           return;
         }
 
-        core.DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(function (cell) {
+        utils.DomHandler.find(this.overlayRef.current, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(function (cell) {
           return cell.tabIndex = -1;
         });
         event.currentTarget.focus();
@@ -1648,8 +1658,13 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             var startDate = this.props.value[0];
             var endDate = this.props.value[1];
 
-            if (!endDate && date.getTime() >= startDate.getTime()) {
-              endDate = date;
+            if (!endDate) {
+              if (date.getTime() >= startDate.getTime()) {
+                endDate = date;
+              } else {
+                endDate = startDate;
+                startDate = date;
+              }
             } else {
               startDate = date;
               endDate = null;
@@ -1722,7 +1737,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               }
             };
 
-            core.OverlayService.on('overlay-click', _this10.overlayEventListener);
+            overlayservice.OverlayService.on('overlay-click', _this10.overlayEventListener);
           });
         }
       }
@@ -1740,7 +1755,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             callback();
           }
 
-          core.OverlayService.off('overlay-click', _this11.overlayEventListener);
+          overlayservice.OverlayService.off('overlay-click', _this11.overlayEventListener);
           _this11.overlayEventListener = null;
         };
 
@@ -1756,7 +1771,8 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "onOverlayEnter",
       value: function onOverlayEnter() {
         if (this.props.autoZIndex) {
-          core.ZIndexUtils.set(this.props.touchUI ? 'modal' : 'overlay', this.overlayRef.current, this.props.baseZIndex);
+          var key = this.props.touchUI ? 'modal' : 'overlay';
+          utils.ZIndexUtils.set(key, this.overlayRef.current, PrimeReact__default["default"].autoZIndex, this.props.baseZIndex || PrimeReact__default["default"].zIndex[key]);
         }
 
         this.alignOverlay();
@@ -1779,7 +1795,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     }, {
       key: "onOverlayExited",
       value: function onOverlayExited() {
-        core.ZIndexUtils.clear(this.overlayRef.current);
+        utils.ZIndexUtils.clear(this.overlayRef.current);
         this.props.onHide && this.props.onHide();
       }
     }, {
@@ -1829,7 +1845,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var _this13 = this;
 
         if (!this.scrollHandler) {
-          this.scrollHandler = new core.ConnectedOverlayScrollHandler(this.container, function () {
+          this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.container, function () {
             if (_this13.isVisible()) {
               _this13.hideOverlay();
             }
@@ -1853,12 +1869,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     }, {
       key: "isNavIconClicked",
       value: function isNavIconClicked(target) {
-        return core.DomHandler.hasClass(target, 'p-datepicker-prev') || core.DomHandler.hasClass(target, 'p-datepicker-prev-icon') || core.DomHandler.hasClass(target, 'p-datepicker-next') || core.DomHandler.hasClass(target, 'p-datepicker-next-icon');
+        return utils.DomHandler.hasClass(target, 'p-datepicker-prev') || utils.DomHandler.hasClass(target, 'p-datepicker-prev-icon') || utils.DomHandler.hasClass(target, 'p-datepicker-next') || utils.DomHandler.hasClass(target, 'p-datepicker-next-icon');
       }
     }, {
       key: "onWindowResize",
       value: function onWindowResize() {
-        if (this.isVisible() && !core.DomHandler.isAndroid()) {
+        if (this.isVisible() && !utils.DomHandler.isAndroid()) {
           this.hideOverlay();
         }
       }
@@ -1868,7 +1884,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         if (this.props.touchUI) {
           this.enableModality();
         } else {
-          core.DomHandler.alignOverlay(this.overlayRef.current, this.inputRef.current.parentElement, this.props.appendTo || PrimeReact__default['default'].appendTo);
+          utils.DomHandler.alignOverlay(this.overlayRef.current, this.inputRef.current.parentElement, this.props.appendTo || PrimeReact__default["default"].appendTo);
         }
       }
     }, {
@@ -1878,8 +1894,8 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
 
         if (!this.touchUIMask) {
           this.touchUIMask = document.createElement('div');
-          this.touchUIMask.style.zIndex = String(core.ZIndexUtils.get(this.overlayRef.current) - 1);
-          core.DomHandler.addMultipleClasses(this.touchUIMask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
+          this.touchUIMask.style.zIndex = String(utils.ZIndexUtils.get(this.overlayRef.current) - 1);
+          utils.DomHandler.addMultipleClasses(this.touchUIMask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
 
           this.touchUIMaskClickListener = function () {
             _this14.disableModality();
@@ -1887,7 +1903,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
 
           this.touchUIMask.addEventListener('click', this.touchUIMaskClickListener);
           document.body.appendChild(this.touchUIMask);
-          core.DomHandler.addClass(document.body, 'p-overflow-hidden');
+          utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
         }
       }
     }, {
@@ -1896,7 +1912,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var _this15 = this;
 
         if (this.touchUIMask) {
-          core.DomHandler.addClass(this.touchUIMask, 'p-component-overlay-leave');
+          utils.DomHandler.addClass(this.touchUIMask, 'p-component-overlay-leave');
           this.touchUIMask.addEventListener('animationend', function () {
             _this15.destroyMask();
           });
@@ -1915,14 +1931,14 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         for (var i = 0; i < bodyChildren.length; i++) {
           var bodyChild = bodyChildren[i];
 
-          if (core.DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+          if (utils.DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
             hasBlockerMasks = true;
             break;
           }
         }
 
         if (!hasBlockerMasks) {
-          core.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+          utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
       }
     }, {
@@ -2843,12 +2859,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             visibility: 'hidden'
           }
         };
-        return /*#__PURE__*/React__default['default'].createElement("button", _extends({
+        return /*#__PURE__*/React__default["default"].createElement("button", _extends({
           type: "button",
           className: "p-datepicker-prev p-link"
-        }, navigatorProps), /*#__PURE__*/React__default['default'].createElement("span", {
+        }, navigatorProps), /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-datepicker-prev-icon pi pi-chevron-left"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }, {
       key: "renderForwardNavigator",
@@ -2865,12 +2881,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             visibility: 'hidden'
           }
         };
-        return /*#__PURE__*/React__default['default'].createElement("button", _extends({
+        return /*#__PURE__*/React__default["default"].createElement("button", _extends({
           type: "button",
           className: "p-datepicker-next p-link"
-        }, navigatorProps), /*#__PURE__*/React__default['default'].createElement("span", {
+        }, navigatorProps), /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-datepicker-next-icon pi pi-chevron-right"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }, {
       key: "isInMinYear",
@@ -2904,14 +2920,14 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           var displayedMonthNames = displayedMonthOptions.map(function (option) {
             return option.label;
           });
-          var content = /*#__PURE__*/React__default['default'].createElement("select", {
+          var content = /*#__PURE__*/React__default["default"].createElement("select", {
             className: "p-datepicker-month",
             onChange: function onChange(e) {
               return _this18.onMonthDropdownChange(e, e.target.value);
             },
             value: viewMonth
           }, displayedMonthOptions.map(function (option) {
-            return /*#__PURE__*/React__default['default'].createElement("option", {
+            return /*#__PURE__*/React__default["default"].createElement("option", {
               key: option.label,
               value: option.value
             }, option.label);
@@ -2927,12 +2943,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               element: content,
               props: this.props
             };
-            return core.ObjectUtils.getJSXElement(this.props.monthNavigatorTemplate, defaultContentOptions);
+            return utils.ObjectUtils.getJSXElement(this.props.monthNavigatorTemplate, defaultContentOptions);
           }
 
           return content;
         } else {
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-datepicker-month"
           }, monthNames[month]);
         }
@@ -2957,14 +2973,14 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           var displayedYearNames = yearOptions.filter(function (year) {
             return !(_this19.props.minDate && _this19.props.minDate.getFullYear() > year) && !(_this19.props.maxDate && _this19.props.maxDate.getFullYear() < year);
           });
-          var content = /*#__PURE__*/React__default['default'].createElement("select", {
+          var content = /*#__PURE__*/React__default["default"].createElement("select", {
             className: "p-datepicker-year",
             onChange: function onChange(e) {
               return _this19.onYearDropdownChange(e, e.target.value);
             },
             value: viewYear
           }, displayedYearNames.map(function (year) {
-            return /*#__PURE__*/React__default['default'].createElement("option", {
+            return /*#__PURE__*/React__default["default"].createElement("option", {
               key: year,
               value: year
             }, year);
@@ -2987,12 +3003,12 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               element: content,
               props: this.props
             };
-            return core.ObjectUtils.getJSXElement(this.props.yearNavigatorTemplate, defaultContentOptions);
+            return utils.ObjectUtils.getJSXElement(this.props.yearNavigatorTemplate, defaultContentOptions);
           }
 
           return content;
         } else {
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-datepicker-year"
           }, year);
         }
@@ -3002,7 +3018,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       value: function renderTitle(monthMetaData) {
         var month = this.renderTitleMonthElement(monthMetaData.month);
         var year = this.renderTitleYearElement(monthMetaData.year);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-title"
         }, month, year);
       }
@@ -3010,18 +3026,18 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "renderDayNames",
       value: function renderDayNames(weekDays) {
         var dayNames = weekDays.map(function (weekDay, index) {
-          return /*#__PURE__*/React__default['default'].createElement("th", {
+          return /*#__PURE__*/React__default["default"].createElement("th", {
             key: "".concat(weekDay, "-").concat(index),
             scope: "col"
-          }, /*#__PURE__*/React__default['default'].createElement("span", null, weekDay));
+          }, /*#__PURE__*/React__default["default"].createElement("span", null, weekDay));
         });
 
         if (this.props.showWeek) {
-          var weekHeader = /*#__PURE__*/React__default['default'].createElement("th", {
+          var weekHeader = /*#__PURE__*/React__default["default"].createElement("th", {
             scope: "col",
             key: 'wn',
             className: "p-datepicker-weekheader p-disabled"
-          }, /*#__PURE__*/React__default['default'].createElement("span", null, PrimeReact.localeOption('weekHeader', this.props.locale)));
+          }, /*#__PURE__*/React__default["default"].createElement("span", null, PrimeReact.localeOption('weekHeader', this.props.locale)));
           return [weekHeader].concat(_toConsumableArray(dayNames));
         } else {
           return dayNames;
@@ -3033,7 +3049,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var _this20 = this;
 
         var content = this.props.dateTemplate ? this.props.dateTemplate(date) : date.day;
-        return /*#__PURE__*/React__default['default'].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           className: className,
           onClick: function onClick(e) {
             return _this20.onDateSelect(e, date);
@@ -3041,7 +3057,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(e) {
             return _this20.onDateCellKeydown(e, date, groupIndex);
           }
-        }, content, /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }, content, /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }, {
       key: "renderWeek",
@@ -3051,26 +3067,26 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var week = weekDates.map(function (date) {
           var selected = _this21.isSelected(date);
 
-          var cellClassName = core.classNames({
+          var cellClassName = utils.classNames({
             'p-datepicker-other-month': date.otherMonth,
             'p-datepicker-today': date.today
           });
-          var dateClassName = core.classNames({
+          var dateClassName = utils.classNames({
             'p-highlight': selected,
             'p-disabled': !date.selectable
           });
           var content = date.otherMonth && !_this21.props.showOtherMonths ? null : _this21.renderDateCellContent(date, dateClassName, groupIndex);
-          return /*#__PURE__*/React__default['default'].createElement("td", {
+          return /*#__PURE__*/React__default["default"].createElement("td", {
             key: date.day,
             className: cellClassName
           }, content);
         });
 
         if (this.props.showWeek) {
-          var weekNumberCell = /*#__PURE__*/React__default['default'].createElement("td", {
+          var weekNumberCell = /*#__PURE__*/React__default["default"].createElement("td", {
             key: 'wn' + weekNumber,
             className: "p-datepicker-weeknumber"
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "p-disabled"
           }, weekNumber));
           return [weekNumberCell].concat(_toConsumableArray(week));
@@ -3084,7 +3100,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var _this22 = this;
 
         return monthMetaData.dates.map(function (weekDates, index) {
-          return /*#__PURE__*/React__default['default'].createElement("tr", {
+          return /*#__PURE__*/React__default["default"].createElement("tr", {
             key: index
           }, _this22.renderWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
         });
@@ -3094,11 +3110,11 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       value: function renderDateViewGrid(monthMetaData, weekDays, groupIndex) {
         var dayNames = this.renderDayNames(weekDays);
         var dates = this.renderDates(monthMetaData, groupIndex);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-calendar-container"
-        }, /*#__PURE__*/React__default['default'].createElement("table", {
+        }, /*#__PURE__*/React__default["default"].createElement("table", {
           className: "p-datepicker-calendar"
-        }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, dayNames)), /*#__PURE__*/React__default['default'].createElement("tbody", null, dates)));
+        }, /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, dayNames)), /*#__PURE__*/React__default["default"].createElement("tbody", null, dates)));
       }
     }, {
       key: "renderMonth",
@@ -3109,10 +3125,10 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var title = this.renderTitle(monthMetaData);
         var dateViewGrid = this.renderDateViewGrid(monthMetaData, weekDays, index);
         var header = this.props.headerTemplate ? this.props.headerTemplate() : null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           key: monthMetaData.month,
           className: "p-datepicker-group"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-header"
         }, header, backwardNavigator, title, forwardNavigator), dateViewGrid);
       }
@@ -3124,7 +3140,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var groups = monthsMetaData.map(function (monthMetaData, index) {
           return _this23.renderMonth(monthMetaData, index);
         });
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-group-container"
         }, groups);
       }
@@ -3134,19 +3150,19 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var viewDate = this.getViewDate();
         var monthsMetaData = this.createMonths(viewDate.getMonth(), viewDate.getFullYear());
         var months = this.renderMonths(monthsMetaData);
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, months);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, months);
       }
     }, {
       key: "renderMonthViewMonth",
       value: function renderMonthViewMonth(index) {
         var _this24 = this;
 
-        var className = core.classNames('p-monthpicker-month', {
+        var className = utils.classNames('p-monthpicker-month', {
           'p-highlight': this.isMonthSelected(index)
         });
         var monthNamesShort = PrimeReact.localeOption('monthNamesShort', this.props.locale);
         var monthName = monthNamesShort[index];
-        return /*#__PURE__*/React__default['default'].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           key: monthName,
           className: className,
           onClick: function onClick(event) {
@@ -3155,7 +3171,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(event) {
             return _this24.onMonthCellKeydown(event, index);
           }
-        }, monthName, /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }, monthName, /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }, {
       key: "renderMonthViewMonths",
@@ -3175,15 +3191,15 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var forwardNavigator = this.renderForwardNavigator(true);
         var yearElement = this.renderTitleYearElement(this.getViewDate().getFullYear());
         var months = this.renderMonthViewMonths();
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-group-container"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-group"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-header"
-        }, backwardNavigator, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, backwardNavigator, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-datepicker-title"
-        }, yearElement), forwardNavigator))), /*#__PURE__*/React__default['default'].createElement("div", {
+        }, yearElement), forwardNavigator))), /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-monthpicker"
         }, months));
       }
@@ -3213,9 +3229,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         }
 
         var hourDisplay = hour < 10 ? '0' + hour : hour;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-hour-picker"
-        }, /*#__PURE__*/React__default['default'].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
@@ -3226,9 +3242,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(e) {
             return _this25.onContainerButtonKeydown(e);
           }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "pi pi-chevron-up"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("span", null, hourDisplay), /*#__PURE__*/React__default['default'].createElement("button", {
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, hourDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
@@ -3239,9 +3255,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(e) {
             return _this25.onContainerButtonKeydown(e);
           }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "pi pi-chevron-down"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
       }
     }, {
       key: "renderMinutePicker",
@@ -3251,9 +3267,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
         var currentTime = this.getCurrentDateTime();
         var minute = currentTime.getMinutes();
         var minuteDisplay = minute < 10 ? '0' + minute : minute;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-minute-picker"
-        }, /*#__PURE__*/React__default['default'].createElement("button", {
+        }, /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
@@ -3264,9 +3280,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(e) {
             return _this26.onContainerButtonKeydown(e);
           }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "pi pi-chevron-up"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("span", null, minuteDisplay), /*#__PURE__*/React__default['default'].createElement("button", {
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, minuteDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
@@ -3277,9 +3293,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           onKeyDown: function onKeyDown(e) {
             return _this26.onContainerButtonKeydown(e);
           }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: "pi pi-chevron-down"
-        }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+        }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
       }
     }, {
       key: "renderSecondPicker",
@@ -3290,9 +3306,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           var currentTime = this.getCurrentDateTime();
           var second = currentTime.getSeconds();
           var secondDisplay = second < 10 ? '0' + second : second;
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-second-picker"
-          }, /*#__PURE__*/React__default['default'].createElement("button", {
+          }, /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onMouseDown: function onMouseDown(e) {
@@ -3303,9 +3319,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             onKeyDown: function onKeyDown(e) {
               return _this27.onContainerButtonKeydown(e);
             }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-up"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("span", null, secondDisplay), /*#__PURE__*/React__default['default'].createElement("button", {
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, secondDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onMouseDown: function onMouseDown(e) {
@@ -3316,9 +3332,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             onKeyDown: function onKeyDown(e) {
               return _this27.onContainerButtonKeydown(e);
             }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-down"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
         }
 
         return null;
@@ -3332,9 +3348,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           var currentTime = this.getCurrentDateTime();
           var millisecond = currentTime.getMilliseconds();
           var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-millisecond-picker"
-          }, /*#__PURE__*/React__default['default'].createElement("button", {
+          }, /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onMouseDown: function onMouseDown(e) {
@@ -3345,9 +3361,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             onKeyDown: function onKeyDown(e) {
               return _this28.onContainerButtonKeydown(e);
             }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-up"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("span", null, millisecondDisplay), /*#__PURE__*/React__default['default'].createElement("button", {
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, millisecondDisplay), /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onMouseDown: function onMouseDown(e) {
@@ -3358,9 +3374,9 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             onKeyDown: function onKeyDown(e) {
               return _this28.onContainerButtonKeydown(e);
             }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-down"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
         }
 
         return null;
@@ -3372,21 +3388,21 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           var currentTime = this.getCurrentDateTime();
           var hour = currentTime.getHours();
           var display = hour > 11 ? 'PM' : 'AM';
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-ampm-picker"
-          }, /*#__PURE__*/React__default['default'].createElement("button", {
+          }, /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onClick: this.toggleAmPm
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-up"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)), /*#__PURE__*/React__default['default'].createElement("span", null, display), /*#__PURE__*/React__default['default'].createElement("button", {
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)), /*#__PURE__*/React__default["default"].createElement("span", null, display), /*#__PURE__*/React__default["default"].createElement("button", {
             type: "button",
             className: "p-link",
             onClick: this.toggleAmPm
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-down"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null)));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null)));
         }
 
         return null;
@@ -3394,15 +3410,15 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     }, {
       key: "renderSeparator",
       value: function renderSeparator(separator) {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-separator"
-        }, /*#__PURE__*/React__default['default'].createElement("span", null, separator));
+        }, /*#__PURE__*/React__default["default"].createElement("span", null, separator));
       }
     }, {
       key: "renderTimePicker",
       value: function renderTimePicker() {
         if (this.props.showTime || this.props.timeOnly) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-timepicker"
           }, this.renderHourPicker(), this.renderSeparator(':'), this.renderMinutePicker(), this.props.showSeconds && this.renderSeparator(':'), this.renderSecondPicker(), this.props.showMillisec && this.renderSeparator('.'), this.renderMiliSecondPicker(), this.props.hourFormat === '12' && this.renderSeparator(':'), this.renderAmPmPicker());
         }
@@ -3413,7 +3429,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "renderInputElement",
       value: function renderInputElement() {
         if (!this.props.inline) {
-          return /*#__PURE__*/React__default['default'].createElement(inputtext.InputText, {
+          return /*#__PURE__*/React__default["default"].createElement(inputtext.InputText, {
             ref: this.inputRef,
             id: this.props.inputId,
             name: this.props.name,
@@ -3425,6 +3441,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
             required: this.props.required,
             autoComplete: "off",
             placeholder: this.props.placeholder,
+            tabIndex: this.props.tabIndex,
             onInput: this.onUserInput,
             onFocus: this.onInputFocus,
             onBlur: this.onInputBlur,
@@ -3440,7 +3457,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       key: "renderButton",
       value: function renderButton() {
         if (this.props.showIcon) {
-          return /*#__PURE__*/React__default['default'].createElement(button.Button, {
+          return /*#__PURE__*/React__default["default"].createElement(button.Button, {
             type: "button",
             icon: this.props.icon,
             onClick: this.onButtonClick,
@@ -3452,22 +3469,34 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
 
         return null;
       }
+    }, {
+      key: "renderContent",
+      value: function renderContent() {
+        var input = this.renderInputElement();
+        var button = this.renderButton();
+
+        if (this.props.iconPos === 'left') {
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, button, input);
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, input, button);
+      }
     }, {
       key: "renderButtonBar",
       value: function renderButtonBar() {
         var _this29 = this;
 
         if (this.props.showButtonBar) {
-          var todayClassName = core.classNames('p-button-text', this.props.todayButtonClassName);
-          var clearClassName = core.classNames('p-button-text', this.props.clearButtonClassName);
+          var todayClassName = utils.classNames('p-button-text', this.props.todayButtonClassName);
+          var clearClassName = utils.classNames('p-button-text', this.props.clearButtonClassName);
 
           var _localeOptions4 = PrimeReact.localeOptions(this.props.locale),
               today = _localeOptions4.today,
               clear = _localeOptions4.clear;
 
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-datepicker-buttonbar"
-          }, /*#__PURE__*/React__default['default'].createElement(button.Button, {
+          }, /*#__PURE__*/React__default["default"].createElement(button.Button, {
             type: "button",
             label: today,
             onClick: this.onTodayButtonClick,
@@ -3475,7 +3504,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
               return _this29.onContainerButtonKeydown(e);
             },
             className: todayClassName
-          }), /*#__PURE__*/React__default['default'].createElement(button.Button, {
+          }), /*#__PURE__*/React__default["default"].createElement(button.Button, {
             type: "button",
             label: clear,
             onClick: this.onClearButtonClick,
@@ -3493,7 +3522,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
       value: function renderFooter() {
         if (this.props.footerTemplate) {
           var content = this.props.footerTemplate();
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-datepicker-footer"
           }, content);
         }
@@ -3503,16 +3532,11 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     }, {
       key: "render",
       value: function render() {
-        var _this30 = this;
-
-        var className = core.classNames('p-calendar p-component p-inputwrapper', this.props.className, {
-          'p-calendar-w-btn': this.props.showIcon,
-          'p-calendar-disabled': this.props.disabled,
-          'p-calendar-timeonly': this.props.timeOnly,
-          'p-inputwrapper-filled': this.props.value || core.DomHandler.hasClass(this.inputRef.current, 'p-filled') && this.inputRef.current.value !== '',
-          'p-inputwrapper-focus': this.state.focused
-        });
-        var panelClassName = core.classNames('p-datepicker p-component', this.props.panelClassName, {
+        var _classNames,
+            _this30 = this;
+
+        var className = utils.classNames('p-calendar p-component p-inputwrapper', this.props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(this.props.iconPos), this.props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', this.props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', this.props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', this.props.value || utils.DomHandler.hasClass(this.inputRef.current, 'p-filled') && this.inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', this.state.focused), _classNames));
+        var panelClassName = utils.classNames('p-datepicker p-component', this.props.panelClassName, {
           'p-datepicker-inline': this.props.inline,
           'p-disabled': this.props.disabled,
           'p-datepicker-timeonly': this.props.timeOnly,
@@ -3520,27 +3544,27 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
           'p-datepicker-monthpicker': this.props.view === 'month',
           'p-datepicker-touch-ui': this.props.touchUI
         });
-        var input = this.renderInputElement();
-        var button = this.renderButton();
+        var content = this.renderContent();
         var datePicker = this.renderDatePicker();
         var timePicker = this.renderTimePicker();
         var buttonBar = this.renderButtonBar();
         var footer = this.renderFooter();
         var isVisible = this.props.inline || this.isVisible();
-        return /*#__PURE__*/React__default['default'].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           ref: function ref(el) {
             return _this30.container = el;
           },
           id: this.props.id,
           className: className,
           style: this.props.style
-        }, input, button, /*#__PURE__*/React__default['default'].createElement(CalendarPanel, {
+        }, content, /*#__PURE__*/React__default["default"].createElement(CalendarPanel, {
           ref: this.overlayRef,
           className: panelClassName,
           style: this.props.panelStyle,
           appendTo: this.props.appendTo,
           inline: this.props.inline,
           onClick: this.onPanelClick,
+          onMouseUp: this.onPanelMouseUp,
           in: isVisible,
           onEnter: this.onOverlayEnter,
           onEntered: this.onOverlayEntered,
@@ -3578,6 +3602,7 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
     placeholder: null,
     showIcon: false,
     icon: 'pi pi-calendar',
+    iconPos: 'right',
     showOnFocus: true,
     numberOfMonths: 1,
     view: 'date',
@@ -3642,4 +3667,4 @@ this.primereact.calendar = (function (exports, React, inputtext, button, core, P
 
   return exports;
 
-}({}, React, primereact.inputtext, primereact.button, primereact.core, primereact.api));
+})({}, React, primereact.inputtext, primereact.button, primereact.csstransition, primereact.portal, primereact.utils, primereact.tooltip, primereact.ripple, primereact.api, primereact.overlayservice);