primevue 4.3.2 → 4.3.3

package/datepicker/index.mjs

@@ -1,3 +1,4 @@
+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 { ZIndex } from '@primeuix/utils/zindex';
@@ -259,6 +260,9 @@ var script$1 = {
   }
 };
 
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -579,8 +583,7 @@ var script = {
     onOverlayEnter: function onOverlayEnter(el) {
       var styles = !this.inline ? {
         position: 'absolute',
-        top: '0',
-        left: '0'
+        top: '0'
       } : undefined;
       addStyle(el, styles);
       if (this.autoZIndex) {
@@ -804,7 +807,8 @@ var script = {
       }
     },
     isOutsideClicked: function isOutsideClicked(event) {
-      return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || this.overlay && this.overlay.contains(event.target));
+      var composedPath = event.composedPath();
+      return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || composedPath.includes(this.$el) || composedPath.includes(this.overlay));
     },
     isNavIconClicked: function isNavIconClicked(event) {
       return this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target)) || this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target));
@@ -1161,6 +1165,31 @@ var script = {
     onTimePickerElementMouseLeave: function onTimePickerElementMouseLeave() {
       this.clearTimePickerTimer();
     },
+    onTimePickerElementKeyDown: function onTimePickerElementKeyDown(event, type, direction) {
+      switch (event.code) {
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+          if (this.isEnabled()) {
+            this.repeat(event, null, type, direction);
+            event.preventDefault();
+          }
+          break;
+      }
+    },
+    onTimePickerElementKeyUp: function onTimePickerElementKeyUp(event) {
+      switch (event.code) {
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+          if (this.isEnabled()) {
+            this.clearTimePickerTimer();
+            this.updateModelTime();
+            event.preventDefault();
+          }
+          break;
+      }
+    },
     repeat: function repeat(event, interval, type, direction) {
       var _this10 = this;
       var i = interval || 500;
@@ -2311,6 +2340,14 @@ var script = {
         this.responsiveStyleElement.remove();
         this.responsiveStyleElement = null;
       }
+    },
+    dayDataP: function dayDataP(date) {
+      return cn({
+        today: date.today,
+        'other-month': date.otherMonth,
+        selected: this.isSelected(date),
+        disabled: !date.selectable
+      });
     }
   },
   computed: {
@@ -2515,6 +2552,144 @@ var script = {
     },
     panelId: function panelId() {
       return this.$id + '_panel';
+    },
+    containerDataP: function containerDataP() {
+      return cn({
+        fluid: this.$fluid
+      });
+    },
+    panelDataP: function panelDataP() {
+      return cn(_defineProperty({
+        inline: this.inline
+      }, 'portal-' + this.appendTo, 'portal-' + this.appendTo));
+    },
+    inputIconDataP: function inputIconDataP() {
+      return cn(_defineProperty({}, this.size, this.size));
+    },
+    timePickerDataP: function timePickerDataP() {
+      return cn({
+        'time-only': this.timeOnly
+      });
+    },
+    hourIncrementCallbacks: function hourIncrementCallbacks() {
+      var _this15 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this15.onTimePickerElementMouseDown(event, 0, 1);
+        },
+        mouseup: function mouseup(event) {
+          return _this15.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this15.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this15.onTimePickerElementKeyDown(event, 0, 1);
+        },
+        keyup: function keyup(event) {
+          return _this15.onTimePickerElementKeyUp(event);
+        }
+      };
+    },
+    hourDecrementCallbacks: function hourDecrementCallbacks() {
+      var _this16 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this16.onTimePickerElementMouseDown(event, 0, -1);
+        },
+        mouseup: function mouseup(event) {
+          return _this16.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this16.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this16.onTimePickerElementKeyDown(event, 0, -1);
+        },
+        keyup: function keyup(event) {
+          return _this16.onTimePickerElementKeyUp(event);
+        }
+      };
+    },
+    minuteIncrementCallbacks: function minuteIncrementCallbacks() {
+      var _this17 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this17.onTimePickerElementMouseDown(event, 1, 1);
+        },
+        mouseup: function mouseup(event) {
+          return _this17.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this17.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this17.onTimePickerElementKeyDown(event, 1, 1);
+        },
+        keyup: function keyup(event) {
+          return _this17.onTimePickerElementKeyUp(event);
+        }
+      };
+    },
+    minuteDecrementCallbacks: function minuteDecrementCallbacks() {
+      var _this18 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this18.onTimePickerElementMouseDown(event, 1, -1);
+        },
+        mouseup: function mouseup(event) {
+          return _this18.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this18.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this18.onTimePickerElementKeyDown(event, 1, -1);
+        },
+        keyup: function keyup(event) {
+          return _this18.onTimePickerElementKeyUp(event);
+        }
+      };
+    },
+    secondIncrementCallbacks: function secondIncrementCallbacks() {
+      var _this19 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this19.onTimePickerElementMouseDown(event, 2, 1);
+        },
+        mouseup: function mouseup(event) {
+          return _this19.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this19.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this19.onTimePickerElementKeyDown(event, 2, 1);
+        },
+        keyup: function keyup(event) {
+          return _this19.onTimePickerElementKeyUp(event);
+        }
+      };
+    },
+    secondDecrementCallbacks: function secondDecrementCallbacks() {
+      var _this20 = this;
+      return {
+        mousedown: function mousedown(event) {
+          return _this20.onTimePickerElementMouseDown(event, 2, -1);
+        },
+        mouseup: function mouseup(event) {
+          return _this20.onTimePickerElementMouseUp(event);
+        },
+        mouseleave: function mouseleave() {
+          return _this20.onTimePickerElementMouseLeave();
+        },
+        keydown: function keydown(event) {
+          return _this20.onTimePickerElementKeyDown(event, 2, -1);
+        },
+        keyup: function keyup(event) {
+          return _this20.onTimePickerElementKeyUp(event);
+        }
+      };
     }
   },
   components: {
@@ -2532,20 +2707,22 @@ var script = {
   }
 };
 
-var _hoisted_1 = ["id"];
+var _hoisted_1 = ["id", "data-p"];
 var _hoisted_2 = ["disabled", "aria-label", "aria-expanded", "aria-controls"];
-var _hoisted_3 = ["id", "role", "aria-modal", "aria-label"];
-var _hoisted_4 = ["disabled", "aria-label"];
+var _hoisted_3 = ["data-p"];
+var _hoisted_4 = ["id", "role", "aria-modal", "aria-label", "data-p"];
 var _hoisted_5 = ["disabled", "aria-label"];
 var _hoisted_6 = ["disabled", "aria-label"];
 var _hoisted_7 = ["disabled", "aria-label"];
-var _hoisted_8 = ["data-p-disabled"];
-var _hoisted_9 = ["abbr"];
-var _hoisted_10 = ["data-p-disabled"];
-var _hoisted_11 = ["aria-label", "data-p-today", "data-p-other-month"];
-var _hoisted_12 = ["onClick", "onKeydown", "aria-selected", "aria-disabled", "data-p-disabled", "data-p-selected"];
-var _hoisted_13 = ["onClick", "onKeydown", "data-p-disabled", "data-p-selected"];
+var _hoisted_8 = ["disabled", "aria-label"];
+var _hoisted_9 = ["data-p-disabled"];
+var _hoisted_10 = ["abbr"];
+var _hoisted_11 = ["data-p-disabled"];
+var _hoisted_12 = ["aria-label", "data-p-today", "data-p-other-month"];
+var _hoisted_13 = ["onClick", "onKeydown", "aria-selected", "aria-disabled", "data-p"];
 var _hoisted_14 = ["onClick", "onKeydown", "data-p-disabled", "data-p-selected"];
+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_Button = resolveComponent("Button");
@@ -2555,7 +2732,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "container",
     id: _ctx.$id,
     "class": _ctx.cx('root'),
-    style: _ctx.sx('root')
+    style: _ctx.sx('root'),
+    "data-p": $options.containerDataP
   }, _ctx.ptmi('root')), [!_ctx.inline ? (openBlock(), createBlock(_component_InputText, {
     key: 0,
     ref: $options.inputRef,
@@ -2587,8 +2765,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onFocus: $options.onFocus,
     onBlur: $options.onBlur,
     onKeydown: $options.onKeyDown,
+    "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", "unstyled", "aria-expanded", "aria-controls", "aria-labelledby", "aria-label", "disabled", "readonly", "onInput", "onClick", "onFocus", "onBlur", "onKeydown", "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", "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", {
     key: 1,
     toggleCallback: $options.onButtonClick
   }, function () {
@@ -2614,7 +2794,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 2
   }, [_ctx.$slots.inputicon || _ctx.showIcon ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
-    "class": _ctx.cx('inputIconContainer')
+    "class": _ctx.cx('inputIconContainer'),
+    "data-p": $options.inputIconDataP
   }, _ctx.ptm('inputIconContainer')), [renderSlot(_ctx.$slots, "inputicon", {
     "class": normalizeClass(_ctx.cx('inputIcon')),
     clickCallback: $options.onButtonClick
@@ -2623,7 +2804,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "class": [_ctx.icon, _ctx.cx('inputIcon')],
       onClick: $options.onButtonClick
     }, _ctx.ptm('inputicon')), null, 16, ["class", "onClick"]))];
-  })], 16)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_component_Portal, {
+  })], 16, _hoisted_3)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo,
     disabled: _ctx.inline
   }, {
@@ -2655,7 +2836,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             onMouseup: _cache[57] || (_cache[57] = function () {
               return $options.onOverlayMouseUp && $options.onOverlayMouseUp.apply($options, arguments);
-            })
+            }),
+            "data-p": $options.panelDataP
           }, _ctx.ptm('panel')), [!_ctx.timeOnly ? (openBlock(), createElementBlock(Fragment, {
             key: 0
           }, [createElementVNode("div", mergeProps({
@@ -2668,29 +2850,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, _ctx.ptm('calendar')), [createElementVNode("div", mergeProps({
               "class": _ctx.cx('header'),
               ref_for: true
-            }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header"), withDirectives(createVNode(_component_Button, mergeProps({
-              ref_for: true,
-              ref: $options.previousButtonRef,
-              "class": _ctx.cx('pcPrevButton'),
-              disabled: _ctx.disabled,
-              "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.prevDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.prevYear : _ctx.$primevue.config.locale.prevMonth,
-              unstyled: _ctx.unstyled,
-              onClick: $options.onPrevButtonClick,
-              onKeydown: $options.onContainerButtonKeydown
-            }, _ctx.navigatorButtonProps, {
-              pt: _ctx.ptm('pcPrevButton'),
-              "data-pc-group-section": "navigator"
-            }), {
-              icon: withCtx(function (slotProps) {
-                return [renderSlot(_ctx.$slots, "previcon", {}, function () {
-                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.prevIcon ? 'span' : 'ChevronLeftIcon'), mergeProps({
-                    "class": [_ctx.prevIcon, slotProps["class"]],
-                    ref_for: true
-                  }, _ctx.ptm('pcPrevButton')['icon']), null, 16, ["class"]))];
-                })];
-              }),
-              _: 2
-            }, 1040, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, groupIndex === 0]]), createElementVNode("div", mergeProps({
+            }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header"), renderSlot(_ctx.$slots, "prevbutton", {
+              actionCallback: function actionCallback(event) {
+                return $options.onPrevButtonClick(event);
+              },
+              keydownCallback: function keydownCallback(event) {
+                return $options.onContainerButtonKeydown(event);
+              }
+            }, function () {
+              return [withDirectives(createVNode(_component_Button, mergeProps({
+                ref_for: true,
+                ref: $options.previousButtonRef,
+                "class": _ctx.cx('pcPrevButton'),
+                disabled: _ctx.disabled,
+                "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.prevDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.prevYear : _ctx.$primevue.config.locale.prevMonth,
+                unstyled: _ctx.unstyled,
+                onClick: $options.onPrevButtonClick,
+                onKeydown: $options.onContainerButtonKeydown
+              }, _ctx.navigatorButtonProps, {
+                pt: _ctx.ptm('pcPrevButton'),
+                "data-pc-group-section": "navigator"
+              }), {
+                icon: withCtx(function (slotProps) {
+                  return [renderSlot(_ctx.$slots, "previcon", {}, function () {
+                    return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.prevIcon ? 'span' : 'ChevronLeftIcon'), mergeProps({
+                      "class": [_ctx.prevIcon, slotProps["class"]],
+                      ref_for: true
+                    }, _ctx.ptm('pcPrevButton')['icon']), null, 16, ["class"]))];
+                  })];
+                }),
+                _: 2
+              }, 1040, ["class", "disabled", "aria-label", "unstyled", "onClick", "onKeydown", "pt"]), [[vShow, groupIndex === 0]])];
+            }), createElementVNode("div", mergeProps({
               "class": _ctx.cx('title'),
               ref_for: true
             }, _ctx.ptm('title')), [_ctx.$primevue.config.locale.showMonthAfterYear ? (openBlock(), createElementBlock(Fragment, {
@@ -2710,7 +2901,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('selectYear'), {
               "data-pc-group-section": "view"
-            }), toDisplayString($options.getYear(month)), 17, _hoisted_4)) : createCommentVNode("", true), $data.currentView === 'date' ? (openBlock(), createElementBlock("button", mergeProps({
+            }), toDisplayString($options.getYear(month)), 17, _hoisted_5)) : createCommentVNode("", true), $data.currentView === 'date' ? (openBlock(), createElementBlock("button", mergeProps({
               key: 1,
               type: "button",
               onClick: _cache[3] || (_cache[3] = function () {
@@ -2725,7 +2916,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('selectMonth'), {
               "data-pc-group-section": "view"
-            }), toDisplayString($options.getMonthName(month.month)), 17, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, {
+            }), toDisplayString($options.getMonthName(month.month)), 17, _hoisted_6)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, {
               key: 1
             }, [$data.currentView === 'date' ? (openBlock(), createElementBlock("button", mergeProps({
               key: 0,
@@ -2742,7 +2933,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('selectMonth'), {
               "data-pc-group-section": "view"
-            }), toDisplayString($options.getMonthName(month.month)), 17, _hoisted_6)) : createCommentVNode("", true), $data.currentView !== 'year' ? (openBlock(), createElementBlock("button", mergeProps({
+            }), toDisplayString($options.getMonthName(month.month)), 17, _hoisted_7)) : createCommentVNode("", true), $data.currentView !== 'year' ? (openBlock(), createElementBlock("button", mergeProps({
               key: 1,
               type: "button",
               onClick: _cache[7] || (_cache[7] = function () {
@@ -2757,7 +2948,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('selectYear'), {
               "data-pc-group-section": "view"
-            }), toDisplayString($options.getYear(month)), 17, _hoisted_7)) : createCommentVNode("", true)], 64)), $data.currentView === 'year' ? (openBlock(), createElementBlock("span", mergeProps({
+            }), toDisplayString($options.getYear(month)), 17, _hoisted_8)) : createCommentVNode("", true)], 64)), $data.currentView === 'year' ? (openBlock(), createElementBlock("span", mergeProps({
               key: 2,
               "class": _ctx.cx('decade'),
               ref_for: true
@@ -2765,29 +2956,38 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               years: $options.yearPickerValues
             }, function () {
               return [createTextVNode(toDisplayString($options.yearPickerValues[0].value) + " - " + toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1].value), 1)];
-            })], 16)) : createCommentVNode("", true)], 16), withDirectives(createVNode(_component_Button, mergeProps({
-              ref_for: true,
-              ref: $options.nextButtonRef,
-              "class": _ctx.cx('pcNextButton'),
-              disabled: _ctx.disabled,
-              "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.nextDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.nextYear : _ctx.$primevue.config.locale.nextMonth,
-              unstyled: _ctx.unstyled,
-              onClick: $options.onNextButtonClick,
-              onKeydown: $options.onContainerButtonKeydown
-            }, _ctx.navigatorButtonProps, {
-              pt: _ctx.ptm('pcNextButton'),
-              "data-pc-group-section": "navigator"
-            }), {
-              icon: withCtx(function (slotProps) {
-                return [renderSlot(_ctx.$slots, "nexticon", {}, function () {
-                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.nextIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
-                    "class": [_ctx.nextIcon, slotProps["class"]],
-                    ref_for: true
-                  }, _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]])], 16), $data.currentView === 'date' ? (openBlock(), createElementBlock("table", mergeProps({
+            })], 16)) : createCommentVNode("", true)], 16), renderSlot(_ctx.$slots, "nextbutton", {
+              actionCallback: function actionCallback(event) {
+                return $options.onNextButtonClick(event);
+              },
+              keydownCallback: function keydownCallback(event) {
+                return $options.onContainerButtonKeydown(event);
+              }
+            }, function () {
+              return [withDirectives(createVNode(_component_Button, mergeProps({
+                ref_for: true,
+                ref: $options.nextButtonRef,
+                "class": _ctx.cx('pcNextButton'),
+                disabled: _ctx.disabled,
+                "aria-label": $data.currentView === 'year' ? _ctx.$primevue.config.locale.nextDecade : $data.currentView === 'month' ? _ctx.$primevue.config.locale.nextYear : _ctx.$primevue.config.locale.nextMonth,
+                unstyled: _ctx.unstyled,
+                onClick: $options.onNextButtonClick,
+                onKeydown: $options.onContainerButtonKeydown
+              }, _ctx.navigatorButtonProps, {
+                pt: _ctx.ptm('pcNextButton'),
+                "data-pc-group-section": "navigator"
+              }), {
+                icon: withCtx(function (slotProps) {
+                  return [renderSlot(_ctx.$slots, "nexticon", {}, function () {
+                    return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.nextIcon ? 'span' : 'ChevronRightIcon'), mergeProps({
+                      "class": [_ctx.nextIcon, slotProps["class"]],
+                      ref_for: true
+                    }, _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]])];
+            })], 16), $data.currentView === 'date' ? (openBlock(), createElementBlock("table", mergeProps({
               key: 0,
               "class": _ctx.cx('dayView'),
               role: "grid",
@@ -2818,7 +3018,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }), {
                 "data-pc-group-section": "tableheadercelllabel"
               }), toDisplayString($options.weekHeaderLabel), 17)];
-            })], 16, _hoisted_8)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList($options.weekDays, function (weekDay) {
+            })], 16, _hoisted_9)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList($options.weekDays, function (weekDay) {
               return openBlock(), createElementBlock("th", mergeProps({
                 key: weekDay,
                 scope: "col",
@@ -2832,7 +3032,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 ref_for: true
               }, _ctx.ptm('weekDay'), {
                 "data-pc-group-section": "tableheadercelllabel"
-              }), toDisplayString(weekDay), 17)], 16, _hoisted_9);
+              }), toDisplayString(weekDay), 17)], 16, _hoisted_10);
             }), 128))], 16)], 16), createElementVNode("tbody", mergeProps({
               ref_for: true
             }, _ctx.ptm('tableBody')), [(openBlock(true), createElementBlock(Fragment, null, renderList(month.dates, function (week, i) {
@@ -2865,7 +3065,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   },
                   ref_for: true
                 }, _ctx.ptm('weekLabel')), "0", 16)) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(month.weekNumbers[i]), 1)];
-              })], 16, _hoisted_10)], 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(week, function (date) {
+              })], 16, _hoisted_11)], 16)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(week, function (date) {
                 return openBlock(), createElementBlock("td", mergeProps({
                   key: date.day + '' + date.month,
                   "aria-label": date.day,
@@ -2909,21 +3109,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     disabled: !date.selectable
                   }
                 }), {
-                  "data-p-disabled": !date.selectable,
-                  "data-p-selected": $options.isSelected(date),
+                  "data-p": $options.dayDataP(date),
                   "data-pc-group-section": "tablebodycelllabel"
                 }), [renderSlot(_ctx.$slots, "date", {
                   date: date
                 }, function () {
                   return [createTextVNode(toDisplayString(date.day), 1)];
-                })], 16, _hoisted_12)), [[_directive_ripple]]) : createCommentVNode("", true), $options.isSelected(date) ? (openBlock(), createElementBlock("div", mergeProps({
+                })], 16, _hoisted_13)), [[_directive_ripple]]) : createCommentVNode("", true), $options.isSelected(date) ? (openBlock(), createElementBlock("div", mergeProps({
                   key: 1,
                   "class": "p-hidden-accessible",
                   "aria-live": "polite",
                   ref_for: true
                 }, _ctx.ptm('hiddenSelectedDay'), {
                   "data-p-hidden-accessible": true
-                }), toDisplayString(date.day), 17)) : createCommentVNode("", true)], 16, _hoisted_11);
+                }), toDisplayString(date.day), 17)) : createCommentVNode("", true)], 16, _hoisted_12);
               }), 128))], 16);
             }), 128))], 16)], 16)) : createCommentVNode("", true)], 16);
           }), 128))], 16), $data.currentView === 'month' ? (openBlock(), createElementBlock("div", mergeProps({
@@ -2966,7 +3165,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('hiddenMonth'), {
               "data-p-hidden-accessible": true
-            }), toDisplayString(m.value), 17)) : createCommentVNode("", true)], 16, _hoisted_13)), [[_directive_ripple]]);
+            }), toDisplayString(m.value), 17)) : createCommentVNode("", true)], 16, _hoisted_14)), [[_directive_ripple]]);
           }), 128))], 16)) : createCommentVNode("", true), $data.currentView === 'year' ? (openBlock(), createElementBlock("div", mergeProps({
             key: 1,
             "class": _ctx.cx('yearView')
@@ -2999,91 +3198,100 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ref_for: true
             }, _ctx.ptm('hiddenYear'), {
               "data-p-hidden-accessible": true
-            }), toDisplayString(y.value), 17)) : createCommentVNode("", true)], 16, _hoisted_14)), [[_directive_ripple]]);
+            }), toDisplayString(y.value), 17)) : createCommentVNode("", true)], 16, _hoisted_15)), [[_directive_ripple]]);
           }), 128))], 16)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), (_ctx.showTime || _ctx.timeOnly) && $data.currentView === 'date' ? (openBlock(), createElementBlock("div", mergeProps({
             key: 1,
-            "class": _ctx.cx('timePicker')
+            "class": _ctx.cx('timePicker'),
+            "data-p": $options.timePickerDataP
           }, _ctx.ptm('timePicker')), [createElementVNode("div", mergeProps({
             "class": _ctx.cx('hourPicker')
           }, _ctx.ptm('hourPicker'), {
             "data-pc-group-section": "timepickerContainer"
-          }), [createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcIncrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.nextHour,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[9] || (_cache[9] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, 1);
-            }),
-            onMouseup: _cache[10] || (_cache[10] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[12] || (_cache[12] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, 1);
-            }, ["enter"])), _cache[13] || (_cache[13] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, 1);
-            }, ["space"]))],
-            onMouseleave: _cache[11] || (_cache[11] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[14] || (_cache[14] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[15] || (_cache[15] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcIncrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
-                  "class": [_ctx.incrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcIncrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "unstyled", "onKeydown", "pt"]), createElementVNode("span", mergeProps(_ctx.ptm('hour'), {
+          }), [renderSlot(_ctx.$slots, "hourincrementbutton", {
+            callbacks: $options.hourIncrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcIncrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.nextHour,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[9] || (_cache[9] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, 1);
+              }),
+              onMouseup: _cache[10] || (_cache[10] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[12] || (_cache[12] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, 1);
+              }, ["enter"])), _cache[13] || (_cache[13] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, 1);
+              }, ["space"]))],
+              onMouseleave: _cache[11] || (_cache[11] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[14] || (_cache[14] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[15] || (_cache[15] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcIncrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                    "class": [_ctx.incrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcIncrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "unstyled", "onKeydown", "pt"])];
+          }), createElementVNode("span", mergeProps(_ctx.ptm('hour'), {
             "data-pc-group-section": "timepickerlabel"
-          }), toDisplayString($options.formattedCurrentHour), 17), createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcDecrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.prevHour,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[16] || (_cache[16] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, -1);
-            }),
-            onMouseup: _cache[17] || (_cache[17] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[19] || (_cache[19] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, -1);
-            }, ["enter"])), _cache[20] || (_cache[20] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 0, -1);
-            }, ["space"]))],
-            onMouseleave: _cache[18] || (_cache[18] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[21] || (_cache[21] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[22] || (_cache[22] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcDecrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
-                  "class": [_ctx.decrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcDecrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "unstyled", "onKeydown", "pt"])], 16), createElementVNode("div", mergeProps(_ctx.ptm('separatorContainer'), {
+          }), toDisplayString($options.formattedCurrentHour), 17), renderSlot(_ctx.$slots, "hourdecrementbutton", {
+            callbacks: $options.hourDecrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcDecrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.prevHour,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[16] || (_cache[16] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, -1);
+              }),
+              onMouseup: _cache[17] || (_cache[17] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[19] || (_cache[19] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, -1);
+              }, ["enter"])), _cache[20] || (_cache[20] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 0, -1);
+              }, ["space"]))],
+              onMouseleave: _cache[18] || (_cache[18] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[21] || (_cache[21] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[22] || (_cache[22] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcDecrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+                    "class": [_ctx.decrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcDecrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "unstyled", "onKeydown", "pt"])];
+          })], 16), createElementVNode("div", mergeProps(_ctx.ptm('separatorContainer'), {
             "data-pc-group-section": "timepickerContainer"
           }), [createElementVNode("span", mergeProps(_ctx.ptm('separator'), {
             "data-pc-group-section": "timepickerlabel"
@@ -3091,85 +3299,93 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('minutePicker')
           }, _ctx.ptm('minutePicker'), {
             "data-pc-group-section": "timepickerContainer"
-          }), [createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcIncrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.nextMinute,
-            disabled: _ctx.disabled,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[23] || (_cache[23] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, 1);
-            }),
-            onMouseup: _cache[24] || (_cache[24] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[26] || (_cache[26] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, 1);
-            }, ["enter"])), _cache[27] || (_cache[27] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, 1);
-            }, ["space"]))],
-            onMouseleave: _cache[25] || (_cache[25] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[28] || (_cache[28] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[29] || (_cache[29] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcIncrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
-                  "class": [_ctx.incrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcIncrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"]), createElementVNode("span", mergeProps(_ctx.ptm('minute'), {
+          }), [renderSlot(_ctx.$slots, "minuteincrementbutton", {
+            callbacks: $options.minuteIncrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcIncrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.nextMinute,
+              disabled: _ctx.disabled,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[23] || (_cache[23] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, 1);
+              }),
+              onMouseup: _cache[24] || (_cache[24] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[26] || (_cache[26] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, 1);
+              }, ["enter"])), _cache[27] || (_cache[27] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, 1);
+              }, ["space"]))],
+              onMouseleave: _cache[25] || (_cache[25] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[28] || (_cache[28] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[29] || (_cache[29] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcIncrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                    "class": [_ctx.incrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcIncrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])];
+          }), createElementVNode("span", mergeProps(_ctx.ptm('minute'), {
             "data-pc-group-section": "timepickerlabel"
-          }), toDisplayString($options.formattedCurrentMinute), 17), createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcDecrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.prevMinute,
-            disabled: _ctx.disabled,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[30] || (_cache[30] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, -1);
-            }),
-            onMouseup: _cache[31] || (_cache[31] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[33] || (_cache[33] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, -1);
-            }, ["enter"])), _cache[34] || (_cache[34] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 1, -1);
-            }, ["space"]))],
-            onMouseleave: _cache[32] || (_cache[32] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[35] || (_cache[35] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[36] || (_cache[36] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcDecrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
-                  "class": [_ctx.decrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcDecrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])], 16), _ctx.showSeconds ? (openBlock(), createElementBlock("div", mergeProps({
+          }), toDisplayString($options.formattedCurrentMinute), 17), renderSlot(_ctx.$slots, "minutedecrementbutton", {
+            callbacks: $options.minuteDecrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcDecrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.prevMinute,
+              disabled: _ctx.disabled,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[30] || (_cache[30] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, -1);
+              }),
+              onMouseup: _cache[31] || (_cache[31] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[33] || (_cache[33] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, -1);
+              }, ["enter"])), _cache[34] || (_cache[34] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 1, -1);
+              }, ["space"]))],
+              onMouseleave: _cache[32] || (_cache[32] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[35] || (_cache[35] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[36] || (_cache[36] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcDecrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+                    "class": [_ctx.decrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcDecrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])];
+          })], 16), _ctx.showSeconds ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {
@@ -3181,85 +3397,93 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('secondPicker')
           }, _ctx.ptm('secondPicker'), {
             "data-pc-group-section": "timepickerContainer"
-          }), [createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcIncrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.nextSecond,
-            disabled: _ctx.disabled,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[37] || (_cache[37] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, 1);
-            }),
-            onMouseup: _cache[38] || (_cache[38] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[40] || (_cache[40] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, 1);
-            }, ["enter"])), _cache[41] || (_cache[41] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, 1);
-            }, ["space"]))],
-            onMouseleave: _cache[39] || (_cache[39] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[42] || (_cache[42] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[43] || (_cache[43] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcIncrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
-                  "class": [_ctx.incrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcIncrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"]), createElementVNode("span", mergeProps(_ctx.ptm('second'), {
+          }), [renderSlot(_ctx.$slots, "secondincrementbutton", {
+            callbacks: $options.secondIncrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcIncrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.nextSecond,
+              disabled: _ctx.disabled,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[37] || (_cache[37] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, 1);
+              }),
+              onMouseup: _cache[38] || (_cache[38] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[40] || (_cache[40] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, 1);
+              }, ["enter"])), _cache[41] || (_cache[41] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, 1);
+              }, ["space"]))],
+              onMouseleave: _cache[39] || (_cache[39] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[42] || (_cache[42] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[43] || (_cache[43] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcIncrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "incrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                    "class": [_ctx.incrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcIncrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])];
+          }), createElementVNode("span", mergeProps(_ctx.ptm('second'), {
             "data-pc-group-section": "timepickerlabel"
-          }), toDisplayString($options.formattedCurrentSecond), 17), createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcDecrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.prevSecond,
-            disabled: _ctx.disabled,
-            unstyled: _ctx.unstyled,
-            onMousedown: _cache[44] || (_cache[44] = function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, -1);
-            }),
-            onMouseup: _cache[45] || (_cache[45] = function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }),
-            onKeydown: [$options.onContainerButtonKeydown, _cache[47] || (_cache[47] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, -1);
-            }, ["enter"])), _cache[48] || (_cache[48] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseDown($event, 2, -1);
-            }, ["space"]))],
-            onMouseleave: _cache[46] || (_cache[46] = function ($event) {
-              return $options.onTimePickerElementMouseLeave();
-            }),
-            onKeyup: [_cache[49] || (_cache[49] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["enter"])), _cache[50] || (_cache[50] = withKeys(function ($event) {
-              return $options.onTimePickerElementMouseUp($event);
-            }, ["space"]))]
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcDecrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
-                  "class": [_ctx.decrementIcon, slotProps["class"]]
-                }, _ctx.ptm('pcDecrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])], 16)) : createCommentVNode("", true), _ctx.hourFormat == '12' ? (openBlock(), createElementBlock("div", mergeProps({
+          }), toDisplayString($options.formattedCurrentSecond), 17), renderSlot(_ctx.$slots, "seconddecrementbutton", {
+            callbacks: $options.secondDecrementCallbacks
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcDecrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.prevSecond,
+              disabled: _ctx.disabled,
+              unstyled: _ctx.unstyled,
+              onMousedown: _cache[44] || (_cache[44] = function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, -1);
+              }),
+              onMouseup: _cache[45] || (_cache[45] = function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }),
+              onKeydown: [$options.onContainerButtonKeydown, _cache[47] || (_cache[47] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, -1);
+              }, ["enter"])), _cache[48] || (_cache[48] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseDown($event, 2, -1);
+              }, ["space"]))],
+              onMouseleave: _cache[46] || (_cache[46] = function ($event) {
+                return $options.onTimePickerElementMouseLeave();
+              }),
+              onKeyup: [_cache[49] || (_cache[49] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["enter"])), _cache[50] || (_cache[50] = withKeys(function ($event) {
+                return $options.onTimePickerElementMouseUp($event);
+              }, ["space"]))]
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcDecrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "decrementicon", {}, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+                    "class": [_ctx.decrementIcon, slotProps["class"]]
+                  }, _ctx.ptm('pcDecrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])];
+          })], 16)) : createCommentVNode("", true), _ctx.hourFormat == '12' ? (openBlock(), createElementBlock("div", mergeProps({
             key: 2,
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {
@@ -3269,83 +3493,119 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), toDisplayString(_ctx.timeSeparator), 17)], 16)) : createCommentVNode("", true), _ctx.hourFormat == '12' ? (openBlock(), createElementBlock("div", mergeProps({
             key: 3,
             "class": _ctx.cx('ampmPicker')
-          }, _ctx.ptm('ampmPicker')), [createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcIncrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.am,
-            disabled: _ctx.disabled,
-            unstyled: _ctx.unstyled,
-            onClick: _cache[51] || (_cache[51] = function ($event) {
-              return $options.toggleAMPM($event);
-            }),
-            onKeydown: $options.onContainerButtonKeydown
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcIncrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "incrementicon", {
-                "class": normalizeClass(_ctx.cx('incrementIcon'))
-              }, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
-                  "class": [_ctx.cx('incrementIcon'), slotProps["class"]]
-                }, _ctx.ptm('pcIncrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"]), createElementVNode("span", mergeProps(_ctx.ptm('ampm'), {
+          }, _ctx.ptm('ampmPicker')), [renderSlot(_ctx.$slots, "ampmincrementbutton", {
+            toggleCallback: function toggleCallback(event) {
+              return $options.toggleAMPM(event);
+            },
+            keydownCallback: function keydownCallback(event) {
+              return $options.onContainerButtonKeydown(event);
+            }
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcIncrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.am,
+              disabled: _ctx.disabled,
+              unstyled: _ctx.unstyled,
+              onClick: _cache[51] || (_cache[51] = function ($event) {
+                return $options.toggleAMPM($event);
+              }),
+              onKeydown: $options.onContainerButtonKeydown
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcIncrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "incrementicon", {
+                  "class": normalizeClass(_ctx.cx('incrementIcon'))
+                }, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.incrementIcon ? 'span' : 'ChevronUpIcon'), mergeProps({
+                    "class": [_ctx.cx('incrementIcon'), slotProps["class"]]
+                  }, _ctx.ptm('pcIncrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])];
+          }), createElementVNode("span", mergeProps(_ctx.ptm('ampm'), {
             "data-pc-group-section": "timepickerlabel"
-          }), toDisplayString($data.pm ? _ctx.$primevue.config.locale.pm : _ctx.$primevue.config.locale.am), 17), createVNode(_component_Button, mergeProps({
-            "class": _ctx.cx('pcDecrementButton'),
-            "aria-label": _ctx.$primevue.config.locale.pm,
-            disabled: _ctx.disabled,
-            onClick: _cache[52] || (_cache[52] = function ($event) {
-              return $options.toggleAMPM($event);
-            }),
-            onKeydown: $options.onContainerButtonKeydown
-          }, _ctx.timepickerButtonProps, {
-            pt: _ctx.ptm('pcDecrementButton'),
-            "data-pc-group-section": "timepickerbutton"
-          }), {
-            icon: withCtx(function (slotProps) {
-              return [renderSlot(_ctx.$slots, "decrementicon", {
-                "class": normalizeClass(_ctx.cx('decrementIcon'))
-              }, function () {
-                return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
-                  "class": [_ctx.cx('decrementIcon'), slotProps["class"]]
-                }, _ctx.ptm('pcDecrementButton')['icon'], {
-                  "data-pc-group-section": "timepickerlabel"
-                }), null, 16, ["class"]))];
-              })];
-            }),
-            _: 3
-          }, 16, ["class", "aria-label", "disabled", "onKeydown", "pt"])], 16)) : createCommentVNode("", true)], 16)) : createCommentVNode("", true), _ctx.showButtonBar ? (openBlock(), createElementBlock("div", mergeProps({
+          }), toDisplayString($data.pm ? _ctx.$primevue.config.locale.pm : _ctx.$primevue.config.locale.am), 17), renderSlot(_ctx.$slots, "ampmdecrementbutton", {
+            toggleCallback: function toggleCallback(event) {
+              return $options.toggleAMPM(event);
+            },
+            keydownCallback: function keydownCallback(event) {
+              return $options.onContainerButtonKeydown(event);
+            }
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              "class": _ctx.cx('pcDecrementButton'),
+              "aria-label": _ctx.$primevue.config.locale.pm,
+              disabled: _ctx.disabled,
+              onClick: _cache[52] || (_cache[52] = function ($event) {
+                return $options.toggleAMPM($event);
+              }),
+              onKeydown: $options.onContainerButtonKeydown
+            }, _ctx.timepickerButtonProps, {
+              pt: _ctx.ptm('pcDecrementButton'),
+              "data-pc-group-section": "timepickerbutton"
+            }), {
+              icon: withCtx(function (slotProps) {
+                return [renderSlot(_ctx.$slots, "decrementicon", {
+                  "class": normalizeClass(_ctx.cx('decrementIcon'))
+                }, function () {
+                  return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.decrementIcon ? 'span' : 'ChevronDownIcon'), mergeProps({
+                    "class": [_ctx.cx('decrementIcon'), slotProps["class"]]
+                  }, _ctx.ptm('pcDecrementButton')['icon'], {
+                    "data-pc-group-section": "timepickerlabel"
+                  }), null, 16, ["class"]))];
+                })];
+              }),
+              _: 3
+            }, 16, ["class", "aria-label", "disabled", "onKeydown", "pt"])];
+          })], 16)) : createCommentVNode("", true)], 16, _hoisted_16)) : createCommentVNode("", true), _ctx.showButtonBar ? (openBlock(), createElementBlock("div", mergeProps({
             key: 2,
             "class": _ctx.cx('buttonbar')
-          }, _ctx.ptm('buttonbar')), [createVNode(_component_Button, mergeProps({
-            label: $options.todayLabel,
-            onClick: _cache[53] || (_cache[53] = function ($event) {
-              return $options.onTodayButtonClick($event);
-            }),
-            "class": _ctx.cx('pcTodayButton'),
-            unstyled: _ctx.unstyled,
-            onKeydown: $options.onContainerButtonKeydown
-          }, _ctx.todayButtonProps, {
-            pt: _ctx.ptm('pcTodayButton'),
-            "data-pc-group-section": "button"
-          }), null, 16, ["label", "class", "unstyled", "onKeydown", "pt"]), createVNode(_component_Button, mergeProps({
-            label: $options.clearLabel,
-            onClick: _cache[54] || (_cache[54] = function ($event) {
-              return $options.onClearButtonClick($event);
-            }),
-            "class": _ctx.cx('pcClearButton'),
-            unstyled: _ctx.unstyled,
-            onKeydown: $options.onContainerButtonKeydown
-          }, _ctx.clearButtonProps, {
-            pt: _ctx.ptm('pcClearButton'),
-            "data-pc-group-section": "button"
-          }), null, 16, ["label", "class", "unstyled", "onKeydown", "pt"])], 16)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer")], 16, _hoisted_3)) : createCommentVNode("", true)];
+          }, _ctx.ptm('buttonbar')), [renderSlot(_ctx.$slots, "todaybutton", {
+            actionCallback: function actionCallback(event) {
+              return $options.onTodayButtonClick(event);
+            },
+            keydownCallback: function keydownCallback(event) {
+              return $options.onContainerButtonKeydown(event);
+            }
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              label: $options.todayLabel,
+              onClick: _cache[53] || (_cache[53] = function ($event) {
+                return $options.onTodayButtonClick($event);
+              }),
+              "class": _ctx.cx('pcTodayButton'),
+              unstyled: _ctx.unstyled,
+              onKeydown: $options.onContainerButtonKeydown
+            }, _ctx.todayButtonProps, {
+              pt: _ctx.ptm('pcTodayButton'),
+              "data-pc-group-section": "button"
+            }), null, 16, ["label", "class", "unstyled", "onKeydown", "pt"])];
+          }), renderSlot(_ctx.$slots, "clearbutton", {
+            actionCallback: function actionCallback(event) {
+              return $options.onClearButtonClick(event);
+            },
+            keydownCallback: function keydownCallback(event) {
+              return $options.onContainerButtonKeydown(event);
+            }
+          }, function () {
+            return [createVNode(_component_Button, mergeProps({
+              label: $options.clearLabel,
+              onClick: _cache[54] || (_cache[54] = function ($event) {
+                return $options.onClearButtonClick($event);
+              }),
+              "class": _ctx.cx('pcClearButton'),
+              unstyled: _ctx.unstyled,
+              onKeydown: $options.onContainerButtonKeydown
+            }, _ctx.clearButtonProps, {
+              pt: _ctx.ptm('pcClearButton'),
+              "data-pc-group-section": "button"
+            }), null, 16, ["label", "class", "unstyled", "onKeydown", "pt"])];
+          })], 16)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer")], 16, _hoisted_4)) : createCommentVNode("", true)];
         }),
         _: 3
       }, 16, ["onAfterEnter", "onAfterLeave", "onLeave"])];