primereact 7.0.0-rc.2 → 7.0.0

package/calendar/calendar.cjs.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var inputtext = require('primereact/inputtext');
 var button = require('primereact/button');
-var core = require('primereact/core');
+var csstransition = require('primereact/csstransition');
+var portal = require('primereact/portal');
+var utils = require('primereact/utils');
+var tooltip = require('primereact/tooltip');
+var ripple = require('primereact/ripple');
 var PrimeReact = require('primereact/api');
+var overlayservice = require('primereact/overlayservice');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -186,7 +191,7 @@ var CalendarPanelComponent = /*#__PURE__*/function (_Component) {
   _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,
@@ -200,7 +205,7 @@ var CalendarPanelComponent = /*#__PURE__*/function (_Component) {
         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,
@@ -212,7 +217,7 @@ var CalendarPanelComponent = /*#__PURE__*/function (_Component) {
     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
       });
@@ -228,8 +233,8 @@ _defineProperty(CalendarPanelComponent, "defaultProps", {
   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));
 });
@@ -264,13 +269,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     };
 
     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);
 
@@ -340,7 +339,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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) {
@@ -421,12 +420,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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
@@ -577,7 +576,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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;
@@ -633,7 +632,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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) {
@@ -657,13 +656,13 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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) {
@@ -683,18 +682,18 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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)');
         }
       }
 
@@ -829,7 +828,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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
         });
@@ -1114,8 +1113,15 @@ var Calendar = /*#__PURE__*/function (_Component) {
     }
   }, {
     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",
@@ -1327,13 +1333,13 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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
                 };
@@ -1358,14 +1364,14 @@ var Calendar = /*#__PURE__*/function (_Component) {
           {
             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
                 };
@@ -1395,7 +1401,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
             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';
@@ -1419,7 +1425,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
             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';
@@ -1469,7 +1475,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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();
@@ -1483,7 +1489,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         } 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';
 
@@ -1503,7 +1509,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           {
             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) {
@@ -1580,7 +1586,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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();
@@ -1663,8 +1669,13 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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;
@@ -1737,7 +1748,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
             }
           };
 
-          core.OverlayService.on('overlay-click', _this10.overlayEventListener);
+          overlayservice.OverlayService.on('overlay-click', _this10.overlayEventListener);
         });
       }
     }
@@ -1755,7 +1766,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           callback();
         }
 
-        core.OverlayService.off('overlay-click', _this11.overlayEventListener);
+        overlayservice.OverlayService.off('overlay-click', _this11.overlayEventListener);
         _this11.overlayEventListener = null;
       };
 
@@ -1771,7 +1782,8 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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();
@@ -1794,7 +1806,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "onOverlayExited",
     value: function onOverlayExited() {
-      core.ZIndexUtils.clear(this.overlayRef.current);
+      utils.ZIndexUtils.clear(this.overlayRef.current);
       this.props.onHide && this.props.onHide();
     }
   }, {
@@ -1844,7 +1856,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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();
           }
@@ -1868,12 +1880,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     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();
       }
     }
@@ -1883,7 +1895,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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);
       }
     }
   }, {
@@ -1893,8 +1905,8 @@ var Calendar = /*#__PURE__*/function (_Component) {
 
       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();
@@ -1902,7 +1914,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
 
         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');
       }
     }
   }, {
@@ -1911,7 +1923,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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();
         });
@@ -1930,14 +1942,14 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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');
       }
     }
   }, {
@@ -2858,12 +2870,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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",
@@ -2880,12 +2892,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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",
@@ -2919,14 +2931,14 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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);
@@ -2942,12 +2954,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
             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]);
       }
@@ -2972,14 +2984,14 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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);
@@ -3002,12 +3014,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
             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);
       }
@@ -3017,7 +3029,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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);
     }
@@ -3025,18 +3037,18 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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;
@@ -3048,7 +3060,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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);
@@ -3056,7 +3068,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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",
@@ -3066,26 +3078,26 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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));
@@ -3099,7 +3111,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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));
       });
@@ -3109,11 +3121,11 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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",
@@ -3124,10 +3136,10 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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);
     }
@@ -3139,7 +3151,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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);
     }
@@ -3149,19 +3161,19 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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) {
@@ -3170,7 +3182,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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",
@@ -3190,15 +3202,15 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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));
     }
@@ -3228,9 +3240,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
       }
 
       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) {
@@ -3241,9 +3253,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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) {
@@ -3254,9 +3266,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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",
@@ -3266,9 +3278,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
       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) {
@@ -3279,9 +3291,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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) {
@@ -3292,9 +3304,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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",
@@ -3305,9 +3317,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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) {
@@ -3318,9 +3330,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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) {
@@ -3331,9 +3343,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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;
@@ -3347,9 +3359,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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) {
@@ -3360,9 +3372,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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) {
@@ -3373,9 +3385,9 @@ var Calendar = /*#__PURE__*/function (_Component) {
           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;
@@ -3387,21 +3399,21 @@ var Calendar = /*#__PURE__*/function (_Component) {
         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;
@@ -3409,15 +3421,15 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     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());
       }
@@ -3428,7 +3440,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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,
@@ -3440,6 +3452,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           required: this.props.required,
           autoComplete: "off",
           placeholder: this.props.placeholder,
+          tabIndex: this.props.tabIndex,
           onInput: this.onUserInput,
           onFocus: this.onInputFocus,
           onBlur: this.onInputBlur,
@@ -3455,7 +3468,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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,
@@ -3467,22 +3480,34 @@ var Calendar = /*#__PURE__*/function (_Component) {
 
       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,
@@ -3490,7 +3515,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
             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,
@@ -3508,7 +3533,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     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);
       }
@@ -3518,16 +3543,11 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     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,
@@ -3535,21 +3555,20 @@ var Calendar = /*#__PURE__*/function (_Component) {
         '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,
@@ -3594,6 +3613,7 @@ _defineProperty(Calendar, "defaultProps", {
   placeholder: null,
   showIcon: false,
   icon: 'pi pi-calendar',
+  iconPos: 'right',
   showOnFocus: true,
   numberOfMonths: 1,
   view: 'date',