primevue 4.3.8 → 4.4.0

package/datepicker/index.mjs

@@ -1,6 +1,6 @@
 import { cn } from '@primeuix/utils';
 import { setAttribute, getFocusableElements, find, findSingle, getIndex, getAttribute, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, addStyle } from '@primeuix/utils/dom';
-import { localeComparator } from '@primeuix/utils/object';
+import { localeComparator, isEmpty, isDate, isNotEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -8,6 +8,7 @@ import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import ChevronUpIcon from '@primevue/icons/chevronup';
+import TimesIcon from '@primevue/icons/times';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -29,6 +30,10 @@ var script$1 = {
       type: String,
       "default": null
     },
+    updateModelType: {
+      type: String,
+      "default": 'date'
+    },
     inline: {
       type: Boolean,
       "default": false
@@ -170,6 +175,10 @@ var script$1 = {
       type: Boolean,
       "default": true
     },
+    showClear: {
+      type: Boolean,
+      "default": false
+    },
     appendTo: {
       type: [String, Object],
       "default": 'body'
@@ -313,16 +322,25 @@ var script = {
       query: null,
       queryMatches: false,
       queryOrientation: null,
-      focusedDateIndex: 0
+      focusedDateIndex: 0,
+      rawValue: null
     };
   },
   watch: {
-    modelValue: function modelValue(newValue) {
-      this.updateCurrentMetaData();
-      if (!this.typeUpdate && !this.inline && this.input) {
-        this.input.value = this.inputFieldValue;
+    modelValue: {
+      immediate: true,
+      handler: function handler(newValue) {
+        var _this$$refs$clearIcon;
+        this.updateCurrentMetaData();
+        this.rawValue = typeof newValue === 'string' ? this.parseValue(newValue) : newValue;
+        if (!this.typeUpdate && !this.inline && this.input) {
+          this.input.value = this.formatValue(this.rawValue);
+        }
+        this.typeUpdate = false;
+        if ((_this$$refs$clearIcon = this.$refs.clearIcon) !== null && _this$$refs$clearIcon !== void 0 && (_this$$refs$clearIcon = _this$$refs$clearIcon.$el) !== null && _this$$refs$clearIcon !== void 0 && _this$$refs$clearIcon.style) {
+          this.$refs.clearIcon.$el.style.display = isEmpty(newValue) ? 'none' : 'block';
+        }
       }
-      this.typeUpdate = false;
     },
     showTime: function showTime() {
       this.updateCurrentMetaData();
@@ -374,7 +392,11 @@ var script = {
         this.initFocusableCell();
       }
     } else {
+      var _this$$refs$clearIcon2;
       this.input.value = this.inputFieldValue;
+      if ((_this$$refs$clearIcon2 = this.$refs.clearIcon) !== null && _this$$refs$clearIcon2 !== void 0 && (_this$$refs$clearIcon2 = _this$$refs$clearIcon2.$el) !== null && _this$$refs$clearIcon2 !== void 0 && _this$$refs$clearIcon2.style) {
+        this.$refs.clearIcon.$el.style.display = !this.$filled ? 'none' : 'block';
+      }
     }
   },
   updated: function updated() {
@@ -408,24 +430,18 @@ var script = {
     this.overlay = null;
   },
   methods: {
-    isComparable: function isComparable() {
-      return this.d_value != null && typeof this.d_value !== 'string';
-    },
     isSelected: function isSelected(dateMeta) {
-      if (!this.isComparable()) {
-        return false;
-      }
-      if (this.d_value) {
+      if (this.rawValue) {
         if (this.isSingleSelection()) {
-          return this.isDateEquals(this.d_value, dateMeta);
+          return this.isDateEquals(this.parseValueForComparison(this.rawValue), dateMeta);
         } else if (this.isMultipleSelection()) {
           var selected = false;
-          var _iterator = _createForOfIteratorHelper(this.d_value),
+          var _iterator = _createForOfIteratorHelper(this.rawValue),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var date = _step.value;
-              selected = this.isDateEquals(date, dateMeta);
+              selected = this.isDateEquals(this.parseValueForComparison(date), dateMeta);
               if (selected) {
                 break;
               }
@@ -437,8 +453,12 @@ var script = {
           }
           return selected;
         } else if (this.isRangeSelection()) {
-          if (this.d_value[1]) return this.isDateEquals(this.d_value[0], dateMeta) || this.isDateEquals(this.d_value[1], dateMeta) || this.isDateBetween(this.d_value[0], this.d_value[1], dateMeta);else {
-            return this.isDateEquals(this.d_value[0], dateMeta);
+          var start = this.parseValueForComparison(this.rawValue[0]);
+          if (this.rawValue[1]) {
+            var end = this.parseValueForComparison(this.rawValue[1]);
+            return this.isDateEquals(start, dateMeta) || this.isDateEquals(end, dateMeta) || this.isDateBetween(start, end, dateMeta);
+          } else {
+            return this.isDateEquals(start, dateMeta);
           }
         }
       }
@@ -446,37 +466,47 @@ var script = {
     },
     isMonthSelected: function isMonthSelected(month) {
       var _this2 = this;
-      if (!this.isComparable()) return false;
       if (this.isMultipleSelection()) {
-        return this.d_value.some(function (currentValue) {
-          return currentValue.getMonth() === month && currentValue.getFullYear() === _this2.currentYear;
+        var _this$rawValue;
+        return (_this$rawValue = this.rawValue) === null || _this$rawValue === void 0 ? void 0 : _this$rawValue.some(function (currentValue) {
+          var parsedDate = _this2.parseValueForComparison(currentValue);
+          return parsedDate.getMonth() === month && parsedDate.getFullYear() === _this2.currentYear;
         });
       } else if (this.isRangeSelection()) {
-        if (!this.d_value[1]) {
-          var _this$d_value$, _this$d_value$2;
-          return ((_this$d_value$ = this.d_value[0]) === null || _this$d_value$ === void 0 ? void 0 : _this$d_value$.getFullYear()) === this.currentYear && ((_this$d_value$2 = this.d_value[0]) === null || _this$d_value$2 === void 0 ? void 0 : _this$d_value$2.getMonth()) === month;
+        var _this$rawValue2, _this$rawValue3;
+        var parsedStart = (_this$rawValue2 = this.rawValue) !== null && _this$rawValue2 !== void 0 && _this$rawValue2[0] ? this.parseValueForComparison(this.rawValue[0]) : null;
+        var parsedEnd = (_this$rawValue3 = this.rawValue) !== null && _this$rawValue3 !== void 0 && _this$rawValue3[1] ? this.parseValueForComparison(this.rawValue[1]) : null;
+        if (!parsedEnd) {
+          return (parsedStart === null || parsedStart === void 0 ? void 0 : parsedStart.getFullYear()) === this.currentYear && (parsedStart === null || parsedStart === void 0 ? void 0 : parsedStart.getMonth()) === month;
         } else {
           var currentDate = new Date(this.currentYear, month, 1);
-          var startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
-          var endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
+          var startDate = new Date(parsedStart.getFullYear(), parsedStart.getMonth(), 1);
+          var endDate = new Date(parsedEnd.getFullYear(), parsedEnd.getMonth(), 1);
           return currentDate >= startDate && currentDate <= endDate;
         }
       } else {
-        return this.d_value.getMonth() === month && this.d_value.getFullYear() === this.currentYear;
+        var _this$rawValue4, _this$rawValue5;
+        return ((_this$rawValue4 = this.rawValue) === null || _this$rawValue4 === void 0 ? void 0 : _this$rawValue4.getMonth()) === month && ((_this$rawValue5 = this.rawValue) === null || _this$rawValue5 === void 0 ? void 0 : _this$rawValue5.getFullYear()) === this.currentYear;
       }
     },
     isYearSelected: function isYearSelected(year) {
-      if (!this.isComparable()) return false;
+      var _this3 = this;
       if (this.isMultipleSelection()) {
-        return this.d_value.some(function (currentValue) {
-          return currentValue.getFullYear() === year;
+        var _this$rawValue6;
+        return (_this$rawValue6 = this.rawValue) === null || _this$rawValue6 === void 0 ? void 0 : _this$rawValue6.some(function (currentValue) {
+          var parsedDate = _this3.parseValueForComparison(currentValue);
+          return parsedDate.getFullYear() === year;
         });
       } else if (this.isRangeSelection()) {
-        var start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
-        var end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
+        var _this$rawValue7, _this$rawValue8;
+        var parsedStart = (_this$rawValue7 = this.rawValue) !== null && _this$rawValue7 !== void 0 && _this$rawValue7[0] ? this.parseValueForComparison(this.rawValue[0]) : null;
+        var parsedEnd = (_this$rawValue8 = this.rawValue) !== null && _this$rawValue8 !== void 0 && _this$rawValue8[1] ? this.parseValueForComparison(this.rawValue[1]) : null;
+        var start = parsedStart ? parsedStart.getFullYear() : null;
+        var end = parsedEnd ? parsedEnd.getFullYear() : null;
         return start === year || end === year || start < year && end > year;
       } else {
-        return this.d_value.getFullYear() === year;
+        var _this$rawValue9;
+        return ((_this$rawValue9 = this.rawValue) === null || _this$rawValue9 === void 0 ? void 0 : _this$rawValue9.getFullYear()) === year;
       }
     },
     isDateEquals: function isDateEquals(value, dateMeta) {
@@ -484,9 +514,11 @@ var script = {
     },
     isDateBetween: function isDateBetween(start, end, dateMeta) {
       var between = false;
-      if (start && end) {
+      var parsedStart = this.parseValueForComparison(start);
+      var parsedEnd = this.parseValueForComparison(end);
+      if (parsedStart && parsedEnd) {
         var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-        return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+        return parsedStart.getTime() <= date.getTime() && parsedEnd.getTime() >= date.getTime();
       }
       return between;
     },
@@ -728,11 +760,11 @@ var script = {
       this.currentSecond = Math.floor(date.getSeconds() / this.stepSecond) * this.stepSecond;
     },
     bindOutsideClickListener: function bindOutsideClickListener() {
-      var _this3 = this;
+      var _this4 = this;
       if (!this.outsideClickListener) {
         this.outsideClickListener = function (event) {
-          if (_this3.overlayVisible && _this3.isOutsideClicked(event)) {
-            _this3.overlayVisible = false;
+          if (_this4.overlayVisible && _this4.isOutsideClicked(event)) {
+            _this4.overlayVisible = false;
           }
         };
         document.addEventListener('mousedown', this.outsideClickListener);
@@ -745,11 +777,11 @@ var script = {
       }
     },
     bindScrollListener: function bindScrollListener() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.scrollHandler) {
         this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, function () {
-          if (_this4.overlayVisible) {
-            _this4.overlayVisible = false;
+          if (_this5.overlayVisible) {
+            _this5.overlayVisible = false;
           }
         });
       }
@@ -761,11 +793,11 @@ var script = {
       }
     },
     bindResizeListener: function bindResizeListener() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this5.overlayVisible && !isTouchDevice()) {
-            _this5.overlayVisible = false;
+          if (_this6.overlayVisible && !isTouchDevice()) {
+            _this6.overlayVisible = false;
           }
         };
         window.addEventListener('resize', this.resizeListener);
@@ -778,14 +810,14 @@ var script = {
       }
     },
     bindMatchMediaListener: function bindMatchMediaListener() {
-      var _this6 = this;
+      var _this7 = this;
       if (!this.matchMediaListener) {
         var query = matchMedia("(max-width: ".concat(this.breakpoint, ")"));
         this.query = query;
         this.queryMatches = query.matches;
         this.matchMediaListener = function () {
-          _this6.queryMatches = query.matches;
-          _this6.mobileActive = false;
+          _this7.queryMatches = query.matches;
+          _this7.mobileActive = false;
         };
         this.query.addEventListener('change', this.matchMediaListener);
       }
@@ -797,12 +829,12 @@ var script = {
       }
     },
     bindMatchMediaOrientationListener: function bindMatchMediaOrientationListener() {
-      var _this7 = this;
+      var _this8 = this;
       if (!this.matchMediaOrientationListener) {
         var query = matchMedia("(orientation: portrait)");
         this.queryOrientation = query;
         this.matchMediaOrientationListener = function () {
-          _this7.alignOverlay();
+          _this8.alignOverlay();
         };
         this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
       }
@@ -888,7 +920,7 @@ var script = {
       });
     },
     onDateSelect: function onDateSelect(event, dateMeta) {
-      var _this8 = this;
+      var _this9 = this;
       if (this.disabled || !dateMeta.selectable) {
         return;
       }
@@ -899,8 +931,8 @@ var script = {
         event.currentTarget.focus();
       }
       if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-        var newValue = this.d_value.filter(function (date) {
-          return !_this8.isDateEquals(date, dateMeta);
+        var newValue = this.rawValue.filter(function (date) {
+          return !_this9.isDateEquals(_this9.parseValueForComparison(date), dateMeta);
         });
         this.updateModel(newValue);
       } else {
@@ -919,12 +951,12 @@ var script = {
           this.input.focus();
         }
         setTimeout(function () {
-          _this8.overlayVisible = false;
+          _this9.overlayVisible = false;
         }, 150);
       }
     },
     selectDate: function selectDate(dateMeta) {
-      var _this9 = this;
+      var _this0 = this;
       var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
       if (this.showTime) {
         this.hourFormat === '12' && this.currentHour !== 12 && this.pm ? date.setHours(this.currentHour + 12) : date.setHours(this.currentHour);
@@ -947,11 +979,11 @@ var script = {
       if (this.isSingleSelection()) {
         modelVal = date;
       } else if (this.isMultipleSelection()) {
-        modelVal = this.d_value ? [].concat(_toConsumableArray(this.d_value), [date]) : [date];
+        modelVal = this.rawValue ? [].concat(_toConsumableArray(this.rawValue), [date]) : [date];
       } else if (this.isRangeSelection()) {
-        if (this.d_value && this.d_value.length) {
-          var startDate = this.d_value[0];
-          var endDate = this.d_value[1];
+        if (this.rawValue && this.rawValue.length) {
+          var startDate = this.parseValueForComparison(this.rawValue[0]);
+          var endDate = this.rawValue[1];
           if (!endDate && date.getTime() >= startDate.getTime()) {
             endDate = date;
             this.focusedDateIndex = 1;
@@ -971,16 +1003,53 @@ var script = {
       }
       if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
         setTimeout(function () {
-          _this9.overlayVisible = false;
+          _this0.overlayVisible = false;
         }, 150);
       }
       this.$emit('date-select', date);
     },
     updateModel: function updateModel(value) {
-      this.writeValue(value);
+      var _this1 = this;
+      this.rawValue = value;
+      if (this.updateModelType === 'date') {
+        if (this.isSingleSelection()) {
+          this.writeValue(value);
+        } else {
+          var stringArrValue = null;
+          if (Array.isArray(value)) {
+            stringArrValue = value.map(function (date) {
+              return _this1.parseValueForComparison(date);
+            });
+          }
+          this.writeValue(stringArrValue);
+        }
+      } else if (this.updateModelType == 'string') {
+        if (this.isSingleSelection()) {
+          this.writeValue(this.formatDateTime(value));
+        } else if (this.isMultipleSelection()) {
+          var _stringArrValue = null;
+          if (Array.isArray(value)) {
+            _stringArrValue = value.map(function (date) {
+              return _this1.formatDateTime(date);
+            });
+          }
+          this.writeValue(_stringArrValue);
+        } else if (this.isRangeSelection()) {
+          var _stringArrValue2 = null;
+          if (Array.isArray(value)) {
+            _stringArrValue2 = value.map(function (date) {
+              if (date === null || date === undefined) {
+                return null;
+              }
+              return typeof date === 'string' ? date : _this1.formatDateTime(date);
+            });
+          }
+          this.writeValue(_stringArrValue2);
+        }
+      }
     },
     shouldSelectDate: function shouldSelectDate() {
-      if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.d_value ? this.d_value.length : 0) : true;else return true;
+      if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.rawValue ? this.rawValue.length : 0) : true;else return true;
     },
     isSingleSelection: function isSingleSelection() {
       return this.selectionMode === 'single';
@@ -1002,7 +1071,7 @@ var script = {
             formattedValue = this.formatDateTime(value);
           } else if (this.isMultipleSelection()) {
             for (var i = 0; i < value.length; i++) {
-              var dateAsString = this.formatDateTime(value[i]);
+              var dateAsString = typeof value[i] === 'string' ? this.formatDateTime(this.parseValueForComparison(value[i])) : this.formatDateTime(value[i]);
               formattedValue += dateAsString;
               if (i !== value.length - 1) {
                 formattedValue += ', ';
@@ -1010,8 +1079,8 @@ var script = {
             }
           } else if (this.isRangeSelection()) {
             if (value && value.length) {
-              var startDate = value[0];
-              var endDate = value[1];
+              var startDate = this.parseValueForComparison(value[0]);
+              var endDate = this.parseValueForComparison(value[1]);
               formattedValue = this.formatDateTime(startDate);
               if (endDate) {
                 formattedValue += ' - ' + this.formatDateTime(endDate);
@@ -1026,7 +1095,7 @@ var script = {
     },
     formatDateTime: function formatDateTime(date) {
       var formattedValue = null;
-      if (date) {
+      if (isDate(date) && isNotEmpty(date)) {
         if (this.timeOnly) {
           formattedValue = this.formatTime(date);
         } else {
@@ -1035,6 +1104,8 @@ var script = {
             formattedValue += ' ' + this.formatTime(date);
           }
         }
+      } else if (this.updateModelType === 'string') {
+        formattedValue = date;
       }
       return formattedValue;
     },
@@ -1155,7 +1226,7 @@ var script = {
       event.preventDefault();
     },
     onClearButtonClick: function onClearButtonClick(event) {
-      this.updateModel(this.$formDefaultValue || null);
+      this.updateModel(null);
       this.overlayVisible = false;
       this.$emit('clear-click', event);
       event.preventDefault();
@@ -1202,11 +1273,11 @@ var script = {
       }
     },
     repeat: function repeat(event, interval, type, direction) {
-      var _this0 = this;
+      var _this10 = this;
       var i = interval || 500;
       this.clearTimePickerTimer();
       this.timePickerTimer = setTimeout(function () {
-        _this0.repeat(event, 100, type, direction);
+        _this10.repeat(event, 100, type, direction);
       }, i);
       switch (type) {
         case 0:
@@ -1231,13 +1302,13 @@ var script = {
       return hours;
     },
     validateTime: function validateTime(hour, minute, second, pm) {
-      var value = this.isComparable() ? this.d_value : this.viewDate;
+      var value = this.viewDate;
       var convertedHour = this.convertTo24Hour(hour, pm);
       if (this.isRangeSelection()) {
-        value = this.d_value[1] || this.d_value[0];
+        value = this.rawValue[1] || this.rawValue[0];
       }
       if (this.isMultipleSelection()) {
-        value = this.d_value[this.d_value.length - 1];
+        value = this.rawValue[this.rawValue.length - 1];
       }
       var valueDateString = value ? value.toDateString() : null;
       if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
@@ -1336,14 +1407,14 @@ var script = {
       event.preventDefault();
     },
     updateModelTime: function updateModelTime() {
-      var _this1 = this;
+      var _this11 = this;
       this.timePickerChange = true;
-      var value = this.isComparable() ? this.d_value : this.viewDate;
+      var value = this.viewDate;
       if (this.isRangeSelection()) {
-        value = this.d_value[this.focusedDateIndex] || this.d_value[0];
+        value = this.rawValue[this.focusedDateIndex] || this.rawValue[0];
       }
       if (this.isMultipleSelection()) {
-        value = this.d_value[this.d_value.length - 1];
+        value = this.rawValue[this.rawValue.length - 1];
       }
       value = value ? new Date(value.getTime()) : new Date();
       if (this.hourFormat == '12') {
@@ -1354,21 +1425,21 @@ var script = {
       value.setMinutes(this.currentMinute);
       value.setSeconds(this.currentSecond);
       if (this.isRangeSelection()) {
-        if (this.focusedDateIndex === 1 && this.d_value[1]) {
-          value = [this.d_value[0], value];
+        if (this.focusedDateIndex === 1 && this.rawValue[1]) {
+          value = [this.rawValue[0], value];
         } else if (this.focusedDateIndex === 0) {
-          value = [value, this.d_value[1]];
+          value = [value, this.rawValue[1]];
         } else {
           value = [value, null];
         }
       }
       if (this.isMultipleSelection()) {
-        value = [].concat(_toConsumableArray(this.d_value.slice(0, -1)), [value]);
+        value = [].concat(_toConsumableArray(this.rawValue.slice(0, -1)), [value]);
       }
       this.updateModel(value);
       this.$emit('date-select', value);
       setTimeout(function () {
-        return _this1.timePickerChange = false;
+        return _this11.timePickerChange = false;
       }, 0);
     },
     toggleAMPM: function toggleAMPM(event) {
@@ -1427,14 +1498,14 @@ var script = {
       this.currentYear = viewDate.getFullYear();
       if (this.showTime || this.timeOnly) {
         var timeDate = viewDate;
-        if (this.isRangeSelection() && this.d_value && this.d_value[this.focusedDateIndex]) {
-          timeDate = this.d_value[this.focusedDateIndex];
+        if (this.isRangeSelection() && this.rawValue && this.rawValue[this.focusedDateIndex]) {
+          timeDate = this.rawValue[this.focusedDateIndex];
         }
         this.updateCurrentTimeMeta(timeDate);
       }
     },
     isValidSelection: function isValidSelection(value) {
-      var _this10 = this;
+      var _this12 = this;
       if (value == null) {
         return true;
       }
@@ -1444,7 +1515,7 @@ var script = {
           isValid = false;
         }
       } else if (value.every(function (v) {
-        return _this10.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
+        return _this12.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
       })) {
         if (this.isRangeSelection()) {
           isValid = value.length > 1 && value[1] >= value[0];
@@ -1483,17 +1554,24 @@ var script = {
       }
       return value;
     },
+    parseValueForComparison: function parseValueForComparison(value) {
+      if (typeof value === 'string') {
+        var parsedValue = this.parseValue(value);
+        return this.isSingleSelection() ? parsedValue : parsedValue[0];
+      }
+      return value;
+    },
     parseDateTime: function parseDateTime(text) {
       var date;
-      var parts = text.split(' ');
+      var parts = text.match(/(?:(.+?) )?(\d{2}:\d{2})(?: (am|pm))?/);
       if (this.timeOnly) {
         date = new Date();
-        this.populateTime(date, parts[0], parts[1]);
+        this.populateTime(date, parts[2], parts[3]);
       } else {
         var dateFormat = this.datePattern;
         if (this.showTime) {
-          date = this.parseDate(parts[0], dateFormat);
-          this.populateTime(date, parts[1], parts[2]);
+          date = this.parseDate(parts[1], dateFormat);
+          this.populateTime(date, parts[2], parts[3]);
         } else {
           date = this.parseDate(text, dateFormat);
         }
@@ -1676,7 +1754,7 @@ var script = {
         month = 1;
         day = doy;
         do {
-          dim = this.getDaysCountInMonth(year, month - 1);
+          dim = this.getDaysCountInMonth(month - 1, year);
           if (day <= dim) {
             break;
           }
@@ -2221,12 +2299,16 @@ var script = {
     },
     onInput: function onInput(event) {
       try {
+        var _this$$refs$clearIcon3;
         this.selectionStart = this.input.selectionStart;
         this.selectionEnd = this.input.selectionEnd;
+        if ((_this$$refs$clearIcon3 = this.$refs.clearIcon) !== null && _this$$refs$clearIcon3 !== void 0 && (_this$$refs$clearIcon3 = _this$$refs$clearIcon3.$el) !== null && _this$$refs$clearIcon3 !== void 0 && _this$$refs$clearIcon3.style) {
+          this.$refs.clearIcon.$el.style.display = isEmpty(event.target.value) ? 'none' : 'block';
+        }
         var value = this.parseValue(event.target.value);
         if (this.isValidSelection(value)) {
           this.typeUpdate = true;
-          this.updateModel(value);
+          this.updateModel(this.updateModelType === 'string' ? this.formatValue(value) : value);
           this.updateCurrentMetaData();
         }
       } catch (err) {
@@ -2247,14 +2329,17 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
-      var _this$formField$onBlu, _this$formField;
+      var _this$formField$onBlu, _this$formField, _this$$refs$clearIcon4;
       this.$emit('blur', {
         originalEvent: event,
         value: event.target.value
       });
       (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField);
       this.focused = false;
-      event.target.value = this.formatValue(this.d_value);
+      event.target.value = this.formatValue(this.rawValue);
+      if ((_this$$refs$clearIcon4 = this.$refs.clearIcon) !== null && _this$$refs$clearIcon4 !== void 0 && (_this$$refs$clearIcon4 = _this$$refs$clearIcon4.$el) !== null && _this$$refs$clearIcon4 !== void 0 && _this$$refs$clearIcon4.style) {
+        this.$refs.clearIcon.$el.style.display = isEmpty(event.target.value) ? 'none' : 'block';
+      }
     },
     onKeyDown: function onKeyDown(event) {
       if (event.code === 'ArrowDown' && this.overlay) {
@@ -2309,6 +2394,10 @@ var script = {
     getYear: function getYear(month) {
       return this.currentView === 'month' ? this.currentYear : month.year;
     },
+    onClearClick: function onClearClick() {
+      this.updateModel(null);
+      this.overlayVisible = false;
+    },
     onOverlayClick: function onOverlayClick(event) {
       event.stopPropagation();
       if (!this.inline) {
@@ -2380,17 +2469,21 @@ var script = {
   },
   computed: {
     viewDate: function viewDate() {
-      var propValue = this.d_value;
+      var propValue = this.rawValue;
       if (propValue && Array.isArray(propValue)) {
         if (this.isRangeSelection()) {
-          if (propValue.length === 1) {
+          if (propValue.length === 0) {
+            propValue = null;
+          } else if (propValue.length === 1) {
             propValue = propValue[0];
           } else {
-            var lastVisibleMonth = new Date(propValue[0].getFullYear(), propValue[0].getMonth() + this.numberOfMonths, 1);
+            var start = this.parseValueForComparison(propValue[0]);
+            var lastVisibleMonth = new Date(start.getFullYear(), start.getMonth() + this.numberOfMonths, 1);
             if (propValue[1] < lastVisibleMonth) {
               propValue = propValue[0];
             } else {
-              propValue = new Date(propValue[1].getFullYear(), propValue[1].getMonth() - this.numberOfMonths + 1, 1);
+              var end = this.parseValueForComparison(propValue[1]);
+              propValue = new Date(end.getFullYear(), end.getMonth() - this.numberOfMonths + 1, 1);
             }
           }
         } else if (this.isMultipleSelection()) {
@@ -2411,7 +2504,7 @@ var script = {
       }
     },
     inputFieldValue: function inputFieldValue() {
-      return this.formatValue(this.d_value);
+      return this.formatValue(this.rawValue);
     },
     months: function months() {
       var months = [];
@@ -2512,20 +2605,20 @@ var script = {
       return this.dateFormat || this.$primevue.config.locale.dateFormat;
     },
     monthPickerValues: function monthPickerValues() {
-      var _this11 = this;
+      var _this13 = this;
       var monthPickerValues = [];
       var isSelectableMonth = function isSelectableMonth(baseMonth) {
-        if (_this11.minDate) {
-          var minMonth = _this11.minDate.getMonth();
-          var minYear = _this11.minDate.getFullYear();
-          if (_this11.currentYear < minYear || _this11.currentYear === minYear && baseMonth < minMonth) {
+        if (_this13.minDate) {
+          var minMonth = _this13.minDate.getMonth();
+          var minYear = _this13.minDate.getFullYear();
+          if (_this13.currentYear < minYear || _this13.currentYear === minYear && baseMonth < minMonth) {
             return false;
           }
         }
-        if (_this11.maxDate) {
-          var maxMonth = _this11.maxDate.getMonth();
-          var maxYear = _this11.maxDate.getFullYear();
-          if (_this11.currentYear > maxYear || _this11.currentYear === maxYear && baseMonth > maxMonth) {
+        if (_this13.maxDate) {
+          var maxMonth = _this13.maxDate.getMonth();
+          var maxYear = _this13.maxDate.getFullYear();
+          if (_this13.currentYear > maxYear || _this13.currentYear === maxYear && baseMonth > maxMonth) {
             return false;
           }
         }
@@ -2540,15 +2633,15 @@ var script = {
       return monthPickerValues;
     },
     yearPickerValues: function yearPickerValues() {
-      var _this12 = this;
+      var _this14 = this;
       var yearPickerValues = [];
       var base = this.currentYear - this.currentYear % 10;
       var isSelectableYear = function isSelectableYear(baseYear) {
-        if (_this12.minDate) {
-          if (_this12.minDate.getFullYear() > baseYear) return false;
+        if (_this14.minDate) {
+          if (_this14.minDate.getFullYear() > baseYear) return false;
         }
-        if (_this12.maxDate) {
-          if (_this12.maxDate.getFullYear() < baseYear) return false;
+        if (_this14.maxDate) {
+          if (_this14.maxDate.getFullYear() < baseYear) return false;
         }
         return true;
       };
@@ -2587,6 +2680,9 @@ var script = {
     switchViewButtonDisabled: function switchViewButtonDisabled() {
       return this.numberOfMonths > 1 || this.disabled;
     },
+    isClearIconVisible: function isClearIconVisible() {
+      return this.showClear && this.rawValue != null && !this.disabled;
+    },
     panelId: function panelId() {
       return this.$id + '_panel';
     },
@@ -2609,122 +2705,122 @@ var script = {
       });
     },
     hourIncrementCallbacks: function hourIncrementCallbacks() {
-      var _this13 = this;
+      var _this15 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this13.onTimePickerElementMouseDown(event, 0, 1);
+          return _this15.onTimePickerElementMouseDown(event, 0, 1);
         },
         mouseup: function mouseup(event) {
-          return _this13.onTimePickerElementMouseUp(event);
+          return _this15.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this13.onTimePickerElementMouseLeave();
+          return _this15.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this13.onTimePickerElementKeyDown(event, 0, 1);
+          return _this15.onTimePickerElementKeyDown(event, 0, 1);
         },
         keyup: function keyup(event) {
-          return _this13.onTimePickerElementKeyUp(event);
+          return _this15.onTimePickerElementKeyUp(event);
         }
       };
     },
     hourDecrementCallbacks: function hourDecrementCallbacks() {
-      var _this14 = this;
+      var _this16 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this14.onTimePickerElementMouseDown(event, 0, -1);
+          return _this16.onTimePickerElementMouseDown(event, 0, -1);
         },
         mouseup: function mouseup(event) {
-          return _this14.onTimePickerElementMouseUp(event);
+          return _this16.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this14.onTimePickerElementMouseLeave();
+          return _this16.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this14.onTimePickerElementKeyDown(event, 0, -1);
+          return _this16.onTimePickerElementKeyDown(event, 0, -1);
         },
         keyup: function keyup(event) {
-          return _this14.onTimePickerElementKeyUp(event);
+          return _this16.onTimePickerElementKeyUp(event);
         }
       };
     },
     minuteIncrementCallbacks: function minuteIncrementCallbacks() {
-      var _this15 = this;
+      var _this17 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this15.onTimePickerElementMouseDown(event, 1, 1);
+          return _this17.onTimePickerElementMouseDown(event, 1, 1);
         },
         mouseup: function mouseup(event) {
-          return _this15.onTimePickerElementMouseUp(event);
+          return _this17.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this15.onTimePickerElementMouseLeave();
+          return _this17.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this15.onTimePickerElementKeyDown(event, 1, 1);
+          return _this17.onTimePickerElementKeyDown(event, 1, 1);
         },
         keyup: function keyup(event) {
-          return _this15.onTimePickerElementKeyUp(event);
+          return _this17.onTimePickerElementKeyUp(event);
         }
       };
     },
     minuteDecrementCallbacks: function minuteDecrementCallbacks() {
-      var _this16 = this;
+      var _this18 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this16.onTimePickerElementMouseDown(event, 1, -1);
+          return _this18.onTimePickerElementMouseDown(event, 1, -1);
         },
         mouseup: function mouseup(event) {
-          return _this16.onTimePickerElementMouseUp(event);
+          return _this18.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this16.onTimePickerElementMouseLeave();
+          return _this18.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this16.onTimePickerElementKeyDown(event, 1, -1);
+          return _this18.onTimePickerElementKeyDown(event, 1, -1);
         },
         keyup: function keyup(event) {
-          return _this16.onTimePickerElementKeyUp(event);
+          return _this18.onTimePickerElementKeyUp(event);
         }
       };
     },
     secondIncrementCallbacks: function secondIncrementCallbacks() {
-      var _this17 = this;
+      var _this19 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this17.onTimePickerElementMouseDown(event, 2, 1);
+          return _this19.onTimePickerElementMouseDown(event, 2, 1);
         },
         mouseup: function mouseup(event) {
-          return _this17.onTimePickerElementMouseUp(event);
+          return _this19.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this17.onTimePickerElementMouseLeave();
+          return _this19.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this17.onTimePickerElementKeyDown(event, 2, 1);
+          return _this19.onTimePickerElementKeyDown(event, 2, 1);
         },
         keyup: function keyup(event) {
-          return _this17.onTimePickerElementKeyUp(event);
+          return _this19.onTimePickerElementKeyUp(event);
         }
       };
     },
     secondDecrementCallbacks: function secondDecrementCallbacks() {
-      var _this18 = this;
+      var _this20 = this;
       return {
         mousedown: function mousedown(event) {
-          return _this18.onTimePickerElementMouseDown(event, 2, -1);
+          return _this20.onTimePickerElementMouseDown(event, 2, -1);
         },
         mouseup: function mouseup(event) {
-          return _this18.onTimePickerElementMouseUp(event);
+          return _this20.onTimePickerElementMouseUp(event);
         },
         mouseleave: function mouseleave() {
-          return _this18.onTimePickerElementMouseLeave();
+          return _this20.onTimePickerElementMouseLeave();
         },
         keydown: function keydown(event) {
-          return _this18.onTimePickerElementKeyDown(event, 2, -1);
+          return _this20.onTimePickerElementKeyDown(event, 2, -1);
         },
         keyup: function keyup(event) {
-          return _this18.onTimePickerElementKeyUp(event);
+          return _this20.onTimePickerElementKeyUp(event);
         }
       };
     }
@@ -2737,7 +2833,8 @@ var script = {
     ChevronLeftIcon: ChevronLeftIcon,
     ChevronRightIcon: ChevronRightIcon,
     ChevronUpIcon: ChevronUpIcon,
-    ChevronDownIcon: ChevronDownIcon
+    ChevronDownIcon: ChevronDownIcon,
+    TimesIcon: TimesIcon
   },
   directives: {
     ripple: Ripple
@@ -2762,6 +2859,7 @@ var _hoisted_15 = ["onClick", "onKeydown", "data-p-disabled", "data-p-selected"]
 var _hoisted_16 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputText = resolveComponent("InputText");
+  var _component_TimesIcon = resolveComponent("TimesIcon");
   var _component_Button = resolveComponent("Button");
   var _component_Portal = resolveComponent("Portal");
   var _directive_ripple = resolveDirective("ripple");
@@ -2806,8 +2904,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-p-has-dropdown": _ctx.showIcon && _ctx.iconDisplay === 'button' && !_ctx.inline,
     "data-p-has-e-icon": _ctx.showIcon && _ctx.iconDisplay === 'input' && !_ctx.inline,
     pt: _ctx.ptm('pcInputText')
-  }, null, 8, ["id", "class", "style", "defaultValue", "placeholder", "name", "size", "invalid", "variant", "fluid", "required", "unstyled", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "disabled", "readonly", "onInput", "onClick", "onFocus", "onBlur", "onKeydown", "data-p-has-dropdown", "data-p-has-e-icon", "pt"])) : createCommentVNode("", true), _ctx.showIcon && _ctx.iconDisplay === 'button' && !_ctx.inline ? renderSlot(_ctx.$slots, "dropdownbutton", {
+  }, null, 8, ["id", "class", "style", "defaultValue", "placeholder", "name", "size", "invalid", "variant", "fluid", "required", "unstyled", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "disabled", "readonly", "onInput", "onClick", "onFocus", "onBlur", "onKeydown", "data-p-has-dropdown", "data-p-has-e-icon", "pt"])) : createCommentVNode("", true), _ctx.showClear && !_ctx.inline ? renderSlot(_ctx.$slots, "clearicon", {
     key: 1,
+    "class": normalizeClass(_ctx.cx('clearIcon')),
+    clearCallback: $options.onClearClick
+  }, function () {
+    return [createVNode(_component_TimesIcon, mergeProps({
+      ref: "clearIcon",
+      "class": [_ctx.cx('clearIcon')],
+      onClick: $options.onClearClick
+    }, _ctx.ptm('clearIcon')), null, 16, ["class", "onClick"])];
+  }) : createCommentVNode("", true), _ctx.showIcon && _ctx.iconDisplay === 'button' && !_ctx.inline ? renderSlot(_ctx.$slots, "dropdownbutton", {
+    key: 2,
     toggleCallback: $options.onButtonClick
   }, function () {
     return [createElementVNode("button", mergeProps({
@@ -2829,7 +2937,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
     })], 16, _hoisted_2)];
   }) : _ctx.showIcon && _ctx.iconDisplay === 'input' && !_ctx.inline ? (openBlock(), createElementBlock(Fragment, {
-    key: 2
+    key: 3
   }, [_ctx.$slots.inputicon || _ctx.showIcon ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
     "class": _ctx.cx('inputIconContainer'),
@@ -2922,8 +3030,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     }, _ctx.ptm('pcPrevButton')['icon']), null, 16, ["class"]))];
                   })];
                 }),
-                _: 2
-              }, 1040, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, groupIndex === 0]])];
+                _: 3
+              }, 16, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, groupIndex === 0]])];
             }), createElementVNode("div", mergeProps({
               "class": _ctx.cx('title')
             }, {
@@ -3037,8 +3145,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     }, _ctx.ptm('pcNextButton')['icon']), null, 16, ["class"]))];
                   })];
                 }),
-                _: 2
-              }, 1040, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, _ctx.numberOfMonths === 1 ? true : groupIndex === _ctx.numberOfMonths - 1]])];
+                _: 3
+              }, 16, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, _ctx.numberOfMonths === 1 ? true : groupIndex === _ctx.numberOfMonths - 1]])];
             })], 16), $data.currentView === 'date' ? (openBlock(), createElementBlock("table", mergeProps({
               key: 0,
               "class": _ctx.cx('dayView'),