primevue 3.12.4 → 3.13.0

package/calendar/calendar.cjs.js

@@ -4,6 +4,7 @@ var utils = require('primevue/utils');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Button = require('primevue/button');
 var Ripple = require('primevue/ripple');
+var Portal = require('primevue/portal');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,6 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
 var script = {
     name: 'Calendar',
@@ -305,7 +307,7 @@ var script = {
 
                     return selected;
                 }
-                else if( this.isRangeSelection()) {
+                else if (this.isRangeSelection()) {
                     if (this.modelValue[1])
                         return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
                     else {
@@ -632,7 +634,7 @@ var script = {
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
-                    if (this.overlayVisible) {
+                    if (this.overlayVisible && !utils.DomHandler.isTouchDevice()) {
                         this.overlayVisible = false;
                     }
                 };
@@ -658,7 +660,7 @@ var script = {
                 this.enableModality();
             }
             else if (this.overlay) {
-                if (this.appendDisabled) {
+                if (this.appendTo === 'self' || this.inline) {
                     utils.DomHandler.relativePosition(this.overlay, this.$el);
                 }
                 else {
@@ -1571,9 +1573,10 @@ var script = {
             }
 
             date = this.daylightSavingAdjust(new Date(year, month - 1, day));
-                    if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
-                        throw "Invalid date"; // E.g. 31/02/00
-                    }
+
+            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+                throw "Invalid date"; // E.g. 31/02/00
+            }
 
             return date;
         },
@@ -2042,7 +2045,7 @@ var script = {
             this.focused = false;
             this.input.value = this.formatValue(this.modelValue);
         },
-        onKeyDown() {
+        onKeyDown(event) {
             if (event.keyCode === 40 && this.overlay) {
                 this.trapFocus(event);
             }
@@ -2076,7 +2079,7 @@ var script = {
         },
         onOverlayClick(event) {
             if (!this.inline) {
-                OverlayEventBus__default['default'].emit('overlay-click', {
+                OverlayEventBus__default["default"].emit('overlay-click', {
                     originalEvent: event,
                     target: this.$el
                 });
@@ -2137,7 +2140,12 @@ var script = {
         viewDate() {
             let propValue = this.modelValue;
             if (propValue && Array.isArray(propValue)) {
-                propValue = propValue[0];
+                if (this.isRangeSelection()) {
+                    propValue = propValue[1] || propValue[0];
+                }
+                else if (this.isMultipleSelection()) {
+                    propValue = propValue[propValue.length - 1];
+                }
             }
 
             if (propValue && typeof propValue !== 'string') {
@@ -2145,12 +2153,15 @@ var script = {
             }
             else {
                 let today = new Date();
+
                 if (this.maxDate && this.maxDate < today) {
                     return this.maxDate;
                 }
+
                 if (this.minDate && this.minDate > today) {
                     return this.minDate;
                 }
+
                 return today;
             }
         },
@@ -2334,12 +2345,6 @@ var script = {
         monthNames() {
             return this.$primevue.config.locale.monthNames;
         },
-        appendDisabled() {
-            return this.appendTo === 'self' || this.inline;
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         attributeSelector() {
             return utils.UniqueComponentId();
         },
@@ -2348,109 +2353,156 @@ var script = {
         }
     },
     components: {
-        'CalendarButton': Button__default['default']
+        'CalendarButton': Button__default["default"],
+        'Portal': Portal__default["default"]
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-datepicker-group-container" };
-const _hoisted_2 = { class: "p-datepicker-header" };
-const _hoisted_3 = /*#__PURE__*/vue.createVNode("span", { class: "p-datepicker-prev-icon pi pi-chevron-left" }, null, -1);
-const _hoisted_4 = { class: "p-datepicker-title" };
-const _hoisted_5 = {
+const _hoisted_1 = ["readonly"];
+const _hoisted_2 = ["role"];
+const _hoisted_3 = { class: "p-datepicker-group-container" };
+const _hoisted_4 = { class: "p-datepicker-header" };
+const _hoisted_5 = ["disabled"];
+const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-prev-icon pi pi-chevron-left" }, null, -1);
+const _hoisted_7 = [
+  _hoisted_6
+];
+const _hoisted_8 = { class: "p-datepicker-title" };
+const _hoisted_9 = ["disabled"];
+const _hoisted_10 = ["disabled"];
+const _hoisted_11 = {
   key: 2,
   class: "p-datepicker-decade"
 };
-const _hoisted_6 = /*#__PURE__*/vue.createVNode("span", { class: "p-datepicker-next-icon pi pi-chevron-right" }, null, -1);
-const _hoisted_7 = {
+const _hoisted_12 = ["disabled"];
+const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-datepicker-next-icon pi pi-chevron-right" }, null, -1);
+const _hoisted_14 = [
+  _hoisted_13
+];
+const _hoisted_15 = {
   key: 0,
   class: "p-datepicker-calendar-container"
 };
-const _hoisted_8 = { class: "p-datepicker-calendar" };
-const _hoisted_9 = {
+const _hoisted_16 = { class: "p-datepicker-calendar" };
+const _hoisted_17 = {
   key: 0,
   scope: "col",
   class: "p-datepicker-weekheader p-disabled"
 };
-const _hoisted_10 = {
+const _hoisted_18 = {
   key: 0,
   class: "p-datepicker-weeknumber"
 };
-const _hoisted_11 = { class: "p-disabled" };
-const _hoisted_12 = {
+const _hoisted_19 = { class: "p-disabled" };
+const _hoisted_20 = {
   key: 0,
   style: {"visibility":"hidden"}
 };
-const _hoisted_13 = {
+const _hoisted_21 = ["onClick", "onKeydown"];
+const _hoisted_22 = {
   key: 0,
   class: "p-monthpicker"
 };
-const _hoisted_14 = {
+const _hoisted_23 = ["onClick", "onKeydown"];
+const _hoisted_24 = {
   key: 1,
   class: "p-yearpicker"
 };
-const _hoisted_15 = {
+const _hoisted_25 = ["onClick", "onKeydown"];
+const _hoisted_26 = {
   key: 1,
   class: "p-timepicker"
 };
-const _hoisted_16 = { class: "p-hour-picker" };
-const _hoisted_17 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-up" }, null, -1);
-const _hoisted_18 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-down" }, null, -1);
-const _hoisted_19 = { class: "p-separator" };
-const _hoisted_20 = { class: "p-minute-picker" };
-const _hoisted_21 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-up" }, null, -1);
-const _hoisted_22 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-down" }, null, -1);
-const _hoisted_23 = {
+const _hoisted_27 = { class: "p-hour-picker" };
+const _hoisted_28 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
+const _hoisted_29 = [
+  _hoisted_28
+];
+const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
+const _hoisted_31 = [
+  _hoisted_30
+];
+const _hoisted_32 = { class: "p-separator" };
+const _hoisted_33 = { class: "p-minute-picker" };
+const _hoisted_34 = ["disabled"];
+const _hoisted_35 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
+const _hoisted_36 = [
+  _hoisted_35
+];
+const _hoisted_37 = ["disabled"];
+const _hoisted_38 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
+const _hoisted_39 = [
+  _hoisted_38
+];
+const _hoisted_40 = {
   key: 0,
   class: "p-separator"
 };
-const _hoisted_24 = {
+const _hoisted_41 = {
   key: 1,
   class: "p-second-picker"
 };
-const _hoisted_25 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-up" }, null, -1);
-const _hoisted_26 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-down" }, null, -1);
-const _hoisted_27 = {
+const _hoisted_42 = ["disabled"];
+const _hoisted_43 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
+const _hoisted_44 = [
+  _hoisted_43
+];
+const _hoisted_45 = ["disabled"];
+const _hoisted_46 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
+const _hoisted_47 = [
+  _hoisted_46
+];
+const _hoisted_48 = {
   key: 2,
   class: "p-separator"
 };
-const _hoisted_28 = {
+const _hoisted_49 = {
   key: 3,
   class: "p-ampm-picker"
 };
-const _hoisted_29 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-up" }, null, -1);
-const _hoisted_30 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-chevron-down" }, null, -1);
-const _hoisted_31 = {
+const _hoisted_50 = ["disabled"];
+const _hoisted_51 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-up" }, null, -1);
+const _hoisted_52 = [
+  _hoisted_51
+];
+const _hoisted_53 = ["disabled"];
+const _hoisted_54 = /*#__PURE__*/vue.createElementVNode("span", { class: "pi pi-chevron-down" }, null, -1);
+const _hoisted_55 = [
+  _hoisted_54
+];
+const _hoisted_56 = {
   key: 2,
   class: "p-datepicker-buttonbar"
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CalendarButton = vue.resolveComponent("CalendarButton");
+  const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createBlock("span", {
+  return (vue.openBlock(), vue.createElementBlock("span", {
     ref: "container",
-    class: $options.containerClass,
-    style: $props.style
+    class: vue.normalizeClass($options.containerClass),
+    style: vue.normalizeStyle($props.style)
   }, [
     (!$props.inline)
-      ? (vue.openBlock(), vue.createBlock("input", vue.mergeProps({
+      ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
           key: 0,
           ref: $options.inputRef,
           type: "text",
           class: ['p-inputtext p-component', $props.inputClass],
           style: $props.inputStyle,
-          onInput: _cache[1] || (_cache[1] = (...args) => ($options.onInput && $options.onInput(...args)))
+          onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
         }, _ctx.$attrs, {
-          onFocus: _cache[2] || (_cache[2] = (...args) => ($options.onFocus && $options.onFocus(...args))),
-          onBlur: _cache[3] || (_cache[3] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-          onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+          onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
+          onBlur: _cache[2] || (_cache[2] = (...args) => ($options.onBlur && $options.onBlur(...args))),
+          onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
           readonly: !$props.manualInput,
           inputmode: "none"
-        }), null, 16, ["readonly"]))
+        }), null, 16, _hoisted_1))
       : vue.createCommentVNode("", true),
     ($props.showIcon)
       ? (vue.openBlock(), vue.createBlock(_component_CalendarButton, {
@@ -2464,390 +2516,373 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-label": $options.inputFieldValue
         }, null, 8, ["icon", "disabled", "onClick", "aria-label"]))
       : vue.createCommentVNode("", true),
-    (vue.openBlock(), vue.createBlock(vue.Teleport, {
-      to: $options.appendTarget,
-      disabled: $options.appendDisabled
-    }, [
-      vue.createVNode(vue.Transition, {
-        name: "p-connected-overlay",
-        onEnter: _cache[67] || (_cache[67] = $event => ($options.onOverlayEnter($event))),
-        onAfterEnter: $options.onOverlayEnterComplete,
-        onAfterLeave: $options.onOverlayAfterLeave,
-        onLeave: $options.onOverlayLeave
-      }, {
-        default: vue.withCtx(() => [
-          ($props.inline ? true : $data.overlayVisible)
-            ? (vue.openBlock(), vue.createBlock("div", {
-                key: 0,
-                ref: $options.overlayRef,
-                class: $options.panelStyleClass,
-                role: $props.inline ? null : 'dialog',
-                onClick: _cache[65] || (_cache[65] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
-                onMouseup: _cache[66] || (_cache[66] = (...args) => ($options.onOverlayMouseUp && $options.onOverlayMouseUp(...args)))
-              }, [
-                (!$props.timeOnly)
-                  ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
-                      vue.createVNode("div", _hoisted_1, [
-                        (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.months, (month, groupIndex) => {
-                          return (vue.openBlock(), vue.createBlock("div", {
-                            class: "p-datepicker-group",
-                            key: month.month + month.year
-                          }, [
-                            vue.createVNode("div", _hoisted_2, [
-                              vue.renderSlot(_ctx.$slots, "header"),
-                              vue.withDirectives(vue.createVNode("button", {
-                                class: "p-datepicker-prev p-link",
-                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onPrevButtonClick && $options.onPrevButtonClick(...args))),
-                                type: "button",
-                                onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                disabled: _ctx.$attrs.disabled
-                              }, [
-                                _hoisted_3
-                              ], 40, ["disabled"]), [
-                                [vue.vShow, groupIndex === 0],
-                                [_directive_ripple]
-                              ]),
-                              vue.createVNode("div", _hoisted_4, [
-                                ($data.currentView === 'date')
-                                  ? (vue.openBlock(), vue.createBlock("button", {
-                                      key: 0,
-                                      type: "button",
-                                      onClick: _cache[7] || (_cache[7] = (...args) => ($options.switchToMonthView && $options.switchToMonthView(...args))),
-                                      onKeydown: _cache[8] || (_cache[8] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                      class: "p-datepicker-month p-link",
-                                      disabled: $options.switchViewButtonDisabled
-                                    }, vue.toDisplayString($options.getMonthName(month.month)), 41, ["disabled"]))
-                                  : vue.createCommentVNode("", true),
-                                ($data.currentView !== 'year')
-                                  ? (vue.openBlock(), vue.createBlock("button", {
-                                      key: 1,
-                                      type: "button",
-                                      onClick: _cache[9] || (_cache[9] = (...args) => ($options.switchToYearView && $options.switchToYearView(...args))),
-                                      onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                      class: "p-datepicker-year p-link",
-                                      disabled: $options.switchViewButtonDisabled
-                                    }, vue.toDisplayString($options.getYear(month)), 41, ["disabled"]))
-                                  : vue.createCommentVNode("", true),
-                                ($data.currentView === 'year')
-                                  ? (vue.openBlock(), vue.createBlock("span", _hoisted_5, [
-                                      vue.renderSlot(_ctx.$slots, "decade", { years: $options.yearPickerValues }, () => [
-                                        vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0]) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1]), 1)
-                                      ])
-                                    ]))
-                                  : vue.createCommentVNode("", true)
+    vue.createVNode(_component_Portal, {
+      appendTo: $props.appendTo,
+      disabled: $props.inline
+    }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(vue.Transition, {
+          name: "p-connected-overlay",
+          onEnter: _cache[66] || (_cache[66] = $event => ($options.onOverlayEnter($event))),
+          onAfterEnter: $options.onOverlayEnterComplete,
+          onAfterLeave: $options.onOverlayAfterLeave,
+          onLeave: $options.onOverlayLeave
+        }, {
+          default: vue.withCtx(() => [
+            ($props.inline ? true : $data.overlayVisible)
+              ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  ref: $options.overlayRef,
+                  class: vue.normalizeClass($options.panelStyleClass),
+                  role: $props.inline ? null : 'dialog',
+                  onClick: _cache[64] || (_cache[64] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
+                  onMouseup: _cache[65] || (_cache[65] = (...args) => ($options.onOverlayMouseUp && $options.onOverlayMouseUp(...args)))
+                }, [
+                  (!$props.timeOnly)
+                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                        vue.createElementVNode("div", _hoisted_3, [
+                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.months, (month, groupIndex) => {
+                            return (vue.openBlock(), vue.createElementBlock("div", {
+                              class: "p-datepicker-group",
+                              key: month.month + month.year
+                            }, [
+                              vue.createElementVNode("div", _hoisted_4, [
+                                vue.renderSlot(_ctx.$slots, "header"),
+                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                  class: "p-datepicker-prev p-link",
+                                  onClick: _cache[4] || (_cache[4] = (...args) => ($options.onPrevButtonClick && $options.onPrevButtonClick(...args))),
+                                  type: "button",
+                                  onKeydown: _cache[5] || (_cache[5] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                  disabled: _ctx.$attrs.disabled
+                                }, _hoisted_7, 40, _hoisted_5)), [
+                                  [vue.vShow, groupIndex === 0],
+                                  [_directive_ripple]
+                                ]),
+                                vue.createElementVNode("div", _hoisted_8, [
+                                  ($data.currentView === 'date')
+                                    ? (vue.openBlock(), vue.createElementBlock("button", {
+                                        key: 0,
+                                        type: "button",
+                                        onClick: _cache[6] || (_cache[6] = (...args) => ($options.switchToMonthView && $options.switchToMonthView(...args))),
+                                        onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                        class: "p-datepicker-month p-link",
+                                        disabled: $options.switchViewButtonDisabled
+                                      }, vue.toDisplayString($options.getMonthName(month.month)), 41, _hoisted_9))
+                                    : vue.createCommentVNode("", true),
+                                  ($data.currentView !== 'year')
+                                    ? (vue.openBlock(), vue.createElementBlock("button", {
+                                        key: 1,
+                                        type: "button",
+                                        onClick: _cache[8] || (_cache[8] = (...args) => ($options.switchToYearView && $options.switchToYearView(...args))),
+                                        onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                        class: "p-datepicker-year p-link",
+                                        disabled: $options.switchViewButtonDisabled
+                                      }, vue.toDisplayString($options.getYear(month)), 41, _hoisted_10))
+                                    : vue.createCommentVNode("", true),
+                                  ($data.currentView === 'year')
+                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, [
+                                        vue.renderSlot(_ctx.$slots, "decade", { years: $options.yearPickerValues }, () => [
+                                          vue.createTextVNode(vue.toDisplayString($options.yearPickerValues[0]) + " - " + vue.toDisplayString($options.yearPickerValues[$options.yearPickerValues.length - 1]), 1)
+                                        ])
+                                      ]))
+                                    : vue.createCommentVNode("", true)
+                                ]),
+                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                  class: "p-datepicker-next p-link",
+                                  onClick: _cache[10] || (_cache[10] = (...args) => ($options.onNextButtonClick && $options.onNextButtonClick(...args))),
+                                  type: "button",
+                                  onKeydown: _cache[11] || (_cache[11] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                  disabled: _ctx.$attrs.disabled
+                                }, _hoisted_14, 40, _hoisted_12)), [
+                                  [vue.vShow, $props.numberOfMonths === 1 ? true : (groupIndex === $props.numberOfMonths - 1)],
+                                  [_directive_ripple]
+                                ])
                               ]),
-                              vue.withDirectives(vue.createVNode("button", {
-                                class: "p-datepicker-next p-link",
-                                onClick: _cache[11] || (_cache[11] = (...args) => ($options.onNextButtonClick && $options.onNextButtonClick(...args))),
-                                type: "button",
-                                onKeydown: _cache[12] || (_cache[12] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                disabled: _ctx.$attrs.disabled
-                              }, [
-                                _hoisted_6
-                              ], 40, ["disabled"]), [
-                                [vue.vShow, $props.numberOfMonths === 1 ? true : (groupIndex === $props.numberOfMonths - 1)],
-                                [_directive_ripple]
-                              ])
-                            ]),
-                            ($data.currentView ==='date')
-                              ? (vue.openBlock(), vue.createBlock("div", _hoisted_7, [
-                                  vue.createVNode("table", _hoisted_8, [
-                                    vue.createVNode("thead", null, [
-                                      vue.createVNode("tr", null, [
-                                        ($props.showWeek)
-                                          ? (vue.openBlock(), vue.createBlock("th", _hoisted_9, [
-                                              vue.createVNode("span", null, vue.toDisplayString($options.weekHeaderLabel), 1)
-                                            ]))
-                                          : vue.createCommentVNode("", true),
-                                        (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.weekDays, (weekDay) => {
-                                          return (vue.openBlock(), vue.createBlock("th", {
-                                            scope: "col",
-                                            key: weekDay
-                                          }, [
-                                            vue.createVNode("span", null, vue.toDisplayString(weekDay), 1)
-                                          ]))
-                                        }), 128))
-                                      ])
-                                    ]),
-                                    vue.createVNode("tbody", null, [
-                                      (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(month.dates, (week, i) => {
-                                        return (vue.openBlock(), vue.createBlock("tr", {
-                                          key: week[0].day + '' + week[0].month
-                                        }, [
+                              ($data.currentView ==='date')
+                                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
+                                    vue.createElementVNode("table", _hoisted_16, [
+                                      vue.createElementVNode("thead", null, [
+                                        vue.createElementVNode("tr", null, [
                                           ($props.showWeek)
-                                            ? (vue.openBlock(), vue.createBlock("td", _hoisted_10, [
-                                                vue.createVNode("span", _hoisted_11, [
-                                                  (month.weekNumbers[i] < 10)
-                                                    ? (vue.openBlock(), vue.createBlock("span", _hoisted_12, "0"))
-                                                    : vue.createCommentVNode("", true),
-                                                  vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)
-                                                ])
+                                            ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_17, [
+                                                vue.createElementVNode("span", null, vue.toDisplayString($options.weekHeaderLabel), 1)
                                               ]))
                                             : vue.createCommentVNode("", true),
-                                          (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(week, (date) => {
-                                            return (vue.openBlock(), vue.createBlock("td", {
-                                              key: date.day + '' + date.month,
-                                              class: {'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}
+                                          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.weekDays, (weekDay) => {
+                                            return (vue.openBlock(), vue.createElementBlock("th", {
+                                              scope: "col",
+                                              key: weekDay
                                             }, [
-                                              vue.withDirectives(vue.createVNode("span", {
-                                                class: {'p-highlight': $options.isSelected(date), 'p-disabled': !date.selectable},
-                                                onClick: $event => ($options.onDateSelect($event, date)),
-                                                draggable: "false",
-                                                onKeydown: $event => ($options.onDateCellKeydown($event,date,groupIndex))
+                                              vue.createElementVNode("span", null, vue.toDisplayString(weekDay), 1)
+                                            ]))
+                                          }), 128))
+                                        ])
+                                      ]),
+                                      vue.createElementVNode("tbody", null, [
+                                        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(month.dates, (week, i) => {
+                                          return (vue.openBlock(), vue.createElementBlock("tr", {
+                                            key: week[0].day + '' + week[0].month
+                                          }, [
+                                            ($props.showWeek)
+                                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_18, [
+                                                  vue.createElementVNode("span", _hoisted_19, [
+                                                    (month.weekNumbers[i] < 10)
+                                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_20, "0"))
+                                                      : vue.createCommentVNode("", true),
+                                                    vue.createTextVNode(" " + vue.toDisplayString(month.weekNumbers[i]), 1)
+                                                  ])
+                                                ]))
+                                              : vue.createCommentVNode("", true),
+                                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week, (date) => {
+                                              return (vue.openBlock(), vue.createElementBlock("td", {
+                                                key: date.day + '' + date.month,
+                                                class: vue.normalizeClass({'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today})
                                               }, [
-                                                vue.renderSlot(_ctx.$slots, "date", { date: date }, () => [
-                                                  vue.createTextVNode(vue.toDisplayString(date.day), 1)
+                                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                                  class: vue.normalizeClass({'p-highlight': $options.isSelected(date), 'p-disabled': !date.selectable}),
+                                                  onClick: $event => ($options.onDateSelect($event, date)),
+                                                  draggable: "false",
+                                                  onKeydown: $event => ($options.onDateCellKeydown($event,date,groupIndex))
+                                                }, [
+                                                  vue.renderSlot(_ctx.$slots, "date", { date: date }, () => [
+                                                    vue.createTextVNode(vue.toDisplayString(date.day), 1)
+                                                  ])
+                                                ], 42, _hoisted_21)), [
+                                                  [_directive_ripple]
                                                 ])
-                                              ], 42, ["onClick", "onKeydown"]), [
-                                                [_directive_ripple]
-                                              ])
-                                            ], 2))
-                                          }), 128))
-                                        ]))
-                                      }), 128))
+                                              ], 2))
+                                            }), 128))
+                                          ]))
+                                        }), 128))
+                                      ])
                                     ])
-                                  ])
-                                ]))
-                              : vue.createCommentVNode("", true)
-                          ]))
-                        }), 128))
-                      ]),
-                      ($data.currentView === 'month')
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_13, [
-                            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.monthPickerValues, (m, i) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
-                                key: m,
-                                onClick: $event => ($options.onMonthSelect($event, i)),
-                                onKeydown: $event => ($options.onMonthCellKeydown($event,i)),
-                                class: ["p-monthpicker-month", {'p-highlight': $options.isMonthSelected(i)}]
-                              }, [
-                                vue.createTextVNode(vue.toDisplayString(m), 1)
-                              ], 42, ["onClick", "onKeydown"])), [
+                                  ]))
+                                : vue.createCommentVNode("", true)
+                            ]))
+                          }), 128))
+                        ]),
+                        ($data.currentView === 'month')
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22, [
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.monthPickerValues, (m, i) => {
+                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                  key: m,
+                                  onClick: $event => ($options.onMonthSelect($event, i)),
+                                  onKeydown: $event => ($options.onMonthCellKeydown($event,i)),
+                                  class: vue.normalizeClass(["p-monthpicker-month", {'p-highlight': $options.isMonthSelected(i)}])
+                                }, [
+                                  vue.createTextVNode(vue.toDisplayString(m), 1)
+                                ], 42, _hoisted_23)), [
+                                  [_directive_ripple]
+                                ])
+                              }), 128))
+                            ]))
+                          : vue.createCommentVNode("", true),
+                        ($data.currentView === 'year')
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_24, [
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.yearPickerValues, (y) => {
+                                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                  key: y,
+                                  onClick: $event => ($options.onYearSelect($event, y)),
+                                  onKeydown: $event => ($options.onYearCellKeydown($event,y)),
+                                  class: vue.normalizeClass(["p-yearpicker-year", {'p-highlight': $options.isYearSelected(y)}])
+                                }, [
+                                  vue.createTextVNode(vue.toDisplayString(y), 1)
+                                ], 42, _hoisted_25)), [
+                                  [_directive_ripple]
+                                ])
+                              }), 128))
+                            ]))
+                          : vue.createCommentVNode("", true)
+                      ], 64))
+                    : vue.createCommentVNode("", true),
+                  (($props.showTime||$props.timeOnly) && $data.currentView === 'date')
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                        vue.createElementVNode("div", _hoisted_27, [
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                            class: "p-link",
+                            onMousedown: _cache[12] || (_cache[12] = $event => ($options.onTimePickerElementMouseDown($event, 0, 1))),
+                            onMouseup: _cache[13] || (_cache[13] = $event => ($options.onTimePickerElementMouseUp($event))),
+                            onKeydown: [
+                              _cache[14] || (_cache[14] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                              _cache[16] || (_cache[16] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, 1)), ["enter"])),
+                              _cache[17] || (_cache[17] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, 1)), ["space"]))
+                            ],
+                            onMouseleave: _cache[15] || (_cache[15] = $event => ($options.onTimePickerElementMouseLeave())),
+                            onKeyup: [
+                              _cache[18] || (_cache[18] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                              _cache[19] || (_cache[19] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                            ],
+                            type: "button"
+                          }, _hoisted_29, 32)), [
+                            [_directive_ripple]
+                          ]),
+                          vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentHour), 1),
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                            class: "p-link",
+                            onMousedown: _cache[20] || (_cache[20] = $event => ($options.onTimePickerElementMouseDown($event, 0, -1))),
+                            onMouseup: _cache[21] || (_cache[21] = $event => ($options.onTimePickerElementMouseUp($event))),
+                            onKeydown: [
+                              _cache[22] || (_cache[22] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                              _cache[24] || (_cache[24] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, -1)), ["enter"])),
+                              _cache[25] || (_cache[25] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, -1)), ["space"]))
+                            ],
+                            onMouseleave: _cache[23] || (_cache[23] = $event => ($options.onTimePickerElementMouseLeave())),
+                            onKeyup: [
+                              _cache[26] || (_cache[26] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                              _cache[27] || (_cache[27] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                            ],
+                            type: "button"
+                          }, _hoisted_31, 32)), [
+                            [_directive_ripple]
+                          ])
+                        ]),
+                        vue.createElementVNode("div", _hoisted_32, [
+                          vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
+                        ]),
+                        vue.createElementVNode("div", _hoisted_33, [
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                            class: "p-link",
+                            onMousedown: _cache[28] || (_cache[28] = $event => ($options.onTimePickerElementMouseDown($event, 1, 1))),
+                            onMouseup: _cache[29] || (_cache[29] = $event => ($options.onTimePickerElementMouseUp($event))),
+                            onKeydown: [
+                              _cache[30] || (_cache[30] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                              _cache[32] || (_cache[32] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["enter"])),
+                              _cache[33] || (_cache[33] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["space"]))
+                            ],
+                            disabled: _ctx.$attrs.disabled,
+                            onMouseleave: _cache[31] || (_cache[31] = $event => ($options.onTimePickerElementMouseLeave())),
+                            onKeyup: [
+                              _cache[34] || (_cache[34] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                              _cache[35] || (_cache[35] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                            ],
+                            type: "button"
+                          }, _hoisted_36, 40, _hoisted_34)), [
+                            [_directive_ripple]
+                          ]),
+                          vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentMinute), 1),
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                            class: "p-link",
+                            onMousedown: _cache[36] || (_cache[36] = $event => ($options.onTimePickerElementMouseDown($event, 1, -1))),
+                            onMouseup: _cache[37] || (_cache[37] = $event => ($options.onTimePickerElementMouseUp($event))),
+                            onKeydown: [
+                              _cache[38] || (_cache[38] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                              _cache[40] || (_cache[40] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["enter"])),
+                              _cache[41] || (_cache[41] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["space"]))
+                            ],
+                            disabled: _ctx.$attrs.disabled,
+                            onMouseleave: _cache[39] || (_cache[39] = $event => ($options.onTimePickerElementMouseLeave())),
+                            onKeyup: [
+                              _cache[42] || (_cache[42] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                              _cache[43] || (_cache[43] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                            ],
+                            type: "button"
+                          }, _hoisted_39, 40, _hoisted_37)), [
+                            [_directive_ripple]
+                          ])
+                        ]),
+                        ($props.showSeconds)
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+                              vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
+                            ]))
+                          : vue.createCommentVNode("", true),
+                        ($props.showSeconds)
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                class: "p-link",
+                                onMousedown: _cache[44] || (_cache[44] = $event => ($options.onTimePickerElementMouseDown($event, 2, 1))),
+                                onMouseup: _cache[45] || (_cache[45] = $event => ($options.onTimePickerElementMouseUp($event))),
+                                onKeydown: [
+                                  _cache[46] || (_cache[46] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                  _cache[48] || (_cache[48] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["enter"])),
+                                  _cache[49] || (_cache[49] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["space"]))
+                                ],
+                                disabled: _ctx.$attrs.disabled,
+                                onMouseleave: _cache[47] || (_cache[47] = $event => ($options.onTimePickerElementMouseLeave())),
+                                onKeyup: [
+                                  _cache[50] || (_cache[50] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                                  _cache[51] || (_cache[51] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                                ],
+                                type: "button"
+                              }, _hoisted_44, 40, _hoisted_42)), [
+                                [_directive_ripple]
+                              ]),
+                              vue.createElementVNode("span", null, vue.toDisplayString($options.formattedCurrentSecond), 1),
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                class: "p-link",
+                                onMousedown: _cache[52] || (_cache[52] = $event => ($options.onTimePickerElementMouseDown($event, 2, -1))),
+                                onMouseup: _cache[53] || (_cache[53] = $event => ($options.onTimePickerElementMouseUp($event))),
+                                onKeydown: [
+                                  _cache[54] || (_cache[54] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
+                                  _cache[56] || (_cache[56] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["enter"])),
+                                  _cache[57] || (_cache[57] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["space"]))
+                                ],
+                                disabled: _ctx.$attrs.disabled,
+                                onMouseleave: _cache[55] || (_cache[55] = $event => ($options.onTimePickerElementMouseLeave())),
+                                onKeyup: [
+                                  _cache[58] || (_cache[58] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
+                                  _cache[59] || (_cache[59] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
+                                ],
+                                type: "button"
+                              }, _hoisted_47, 40, _hoisted_45)), [
                                 [_directive_ripple]
                               ])
-                            }), 128))
-                          ]))
-                        : vue.createCommentVNode("", true),
-                      ($data.currentView === 'year')
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_14, [
-                            (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.yearPickerValues, (y) => {
-                              return vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
-                                key: y,
-                                onClick: $event => ($options.onYearSelect($event, y)),
-                                onKeydown: $event => ($options.onYearCellKeydown($event,y)),
-                                class: ["p-yearpicker-year", {'p-highlight': $options.isYearSelected(y)}]
-                              }, [
-                                vue.createTextVNode(vue.toDisplayString(y), 1)
-                              ], 42, ["onClick", "onKeydown"])), [
+                            ]))
+                          : vue.createCommentVNode("", true),
+                        ($props.hourFormat=='12')
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
+                              vue.createElementVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
+                            ]))
+                          : vue.createCommentVNode("", true),
+                        ($props.hourFormat=='12')
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                class: "p-link",
+                                onClick: _cache[60] || (_cache[60] = $event => ($options.toggleAMPM($event))),
+                                type: "button",
+                                disabled: _ctx.$attrs.disabled
+                              }, _hoisted_52, 8, _hoisted_50)), [
+                                [_directive_ripple]
+                              ]),
+                              vue.createElementVNode("span", null, vue.toDisplayString($data.pm ? 'PM' : 'AM'), 1),
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                class: "p-link",
+                                onClick: _cache[61] || (_cache[61] = $event => ($options.toggleAMPM($event))),
+                                type: "button",
+                                disabled: _ctx.$attrs.disabled
+                              }, _hoisted_55, 8, _hoisted_53)), [
                                 [_directive_ripple]
                               ])
-                            }), 128))
-                          ]))
-                        : vue.createCommentVNode("", true)
-                    ], 64))
-                  : vue.createCommentVNode("", true),
-                (($props.showTime||$props.timeOnly) && $data.currentView === 'date')
-                  ? (vue.openBlock(), vue.createBlock("div", _hoisted_15, [
-                      vue.createVNode("div", _hoisted_16, [
-                        vue.withDirectives(vue.createVNode("button", {
-                          class: "p-link",
-                          onMousedown: _cache[13] || (_cache[13] = $event => ($options.onTimePickerElementMouseDown($event, 0, 1))),
-                          onMouseup: _cache[14] || (_cache[14] = $event => ($options.onTimePickerElementMouseUp($event))),
-                          onKeydown: [
-                            _cache[15] || (_cache[15] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                            _cache[17] || (_cache[17] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, 1)), ["enter"])),
-                            _cache[18] || (_cache[18] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, 1)), ["space"]))
-                          ],
-                          onMouseleave: _cache[16] || (_cache[16] = $event => ($options.onTimePickerElementMouseLeave())),
-                          onKeyup: [
-                            _cache[19] || (_cache[19] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                            _cache[20] || (_cache[20] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                          ],
-                          type: "button"
-                        }, [
-                          _hoisted_17
-                        ], 544), [
-                          [_directive_ripple]
-                        ]),
-                        vue.createVNode("span", null, vue.toDisplayString($options.formattedCurrentHour), 1),
-                        vue.withDirectives(vue.createVNode("button", {
-                          class: "p-link",
-                          onMousedown: _cache[21] || (_cache[21] = $event => ($options.onTimePickerElementMouseDown($event, 0, -1))),
-                          onMouseup: _cache[22] || (_cache[22] = $event => ($options.onTimePickerElementMouseUp($event))),
-                          onKeydown: [
-                            _cache[23] || (_cache[23] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                            _cache[25] || (_cache[25] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, -1)), ["enter"])),
-                            _cache[26] || (_cache[26] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 0, -1)), ["space"]))
-                          ],
-                          onMouseleave: _cache[24] || (_cache[24] = $event => ($options.onTimePickerElementMouseLeave())),
-                          onKeyup: [
-                            _cache[27] || (_cache[27] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                            _cache[28] || (_cache[28] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                          ],
-                          type: "button"
-                        }, [
-                          _hoisted_18
-                        ], 544), [
-                          [_directive_ripple]
-                        ])
-                      ]),
-                      vue.createVNode("div", _hoisted_19, [
-                        vue.createVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                      ]),
-                      vue.createVNode("div", _hoisted_20, [
-                        vue.withDirectives(vue.createVNode("button", {
-                          class: "p-link",
-                          onMousedown: _cache[29] || (_cache[29] = $event => ($options.onTimePickerElementMouseDown($event, 1, 1))),
-                          onMouseup: _cache[30] || (_cache[30] = $event => ($options.onTimePickerElementMouseUp($event))),
-                          onKeydown: [
-                            _cache[31] || (_cache[31] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                            _cache[33] || (_cache[33] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["enter"])),
-                            _cache[34] || (_cache[34] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, 1)), ["space"]))
-                          ],
-                          disabled: _ctx.$attrs.disabled,
-                          onMouseleave: _cache[32] || (_cache[32] = $event => ($options.onTimePickerElementMouseLeave())),
-                          onKeyup: [
-                            _cache[35] || (_cache[35] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                            _cache[36] || (_cache[36] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                          ],
-                          type: "button"
-                        }, [
-                          _hoisted_21
-                        ], 40, ["disabled"]), [
-                          [_directive_ripple]
-                        ]),
-                        vue.createVNode("span", null, vue.toDisplayString($options.formattedCurrentMinute), 1),
-                        vue.withDirectives(vue.createVNode("button", {
-                          class: "p-link",
-                          onMousedown: _cache[37] || (_cache[37] = $event => ($options.onTimePickerElementMouseDown($event, 1, -1))),
-                          onMouseup: _cache[38] || (_cache[38] = $event => ($options.onTimePickerElementMouseUp($event))),
-                          onKeydown: [
-                            _cache[39] || (_cache[39] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                            _cache[41] || (_cache[41] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["enter"])),
-                            _cache[42] || (_cache[42] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 1, -1)), ["space"]))
-                          ],
-                          disabled: _ctx.$attrs.disabled,
-                          onMouseleave: _cache[40] || (_cache[40] = $event => ($options.onTimePickerElementMouseLeave())),
-                          onKeyup: [
-                            _cache[43] || (_cache[43] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                            _cache[44] || (_cache[44] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                          ],
-                          type: "button"
-                        }, [
-                          _hoisted_22
-                        ], 40, ["disabled"]), [
-                          [_directive_ripple]
-                        ])
-                      ]),
-                      ($props.showSeconds)
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_23, [
-                            vue.createVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                          ]))
-                        : vue.createCommentVNode("", true),
-                      ($props.showSeconds)
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_24, [
-                            vue.withDirectives(vue.createVNode("button", {
-                              class: "p-link",
-                              onMousedown: _cache[45] || (_cache[45] = $event => ($options.onTimePickerElementMouseDown($event, 2, 1))),
-                              onMouseup: _cache[46] || (_cache[46] = $event => ($options.onTimePickerElementMouseUp($event))),
-                              onKeydown: [
-                                _cache[47] || (_cache[47] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                _cache[49] || (_cache[49] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["enter"])),
-                                _cache[50] || (_cache[50] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, 1)), ["space"]))
-                              ],
-                              disabled: _ctx.$attrs.disabled,
-                              onMouseleave: _cache[48] || (_cache[48] = $event => ($options.onTimePickerElementMouseLeave())),
-                              onKeyup: [
-                                _cache[51] || (_cache[51] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                                _cache[52] || (_cache[52] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                              ],
-                              type: "button"
-                            }, [
-                              _hoisted_25
-                            ], 40, ["disabled"]), [
-                              [_directive_ripple]
-                            ]),
-                            vue.createVNode("span", null, vue.toDisplayString($options.formattedCurrentSecond), 1),
-                            vue.withDirectives(vue.createVNode("button", {
-                              class: "p-link",
-                              onMousedown: _cache[53] || (_cache[53] = $event => ($options.onTimePickerElementMouseDown($event, 2, -1))),
-                              onMouseup: _cache[54] || (_cache[54] = $event => ($options.onTimePickerElementMouseUp($event))),
-                              onKeydown: [
-                                _cache[55] || (_cache[55] = (...args) => ($options.onContainerButtonKeydown && $options.onContainerButtonKeydown(...args))),
-                                _cache[57] || (_cache[57] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["enter"])),
-                                _cache[58] || (_cache[58] = vue.withKeys($event => ($options.onTimePickerElementMouseDown($event, 2, -1)), ["space"]))
-                              ],
-                              disabled: _ctx.$attrs.disabled,
-                              onMouseleave: _cache[56] || (_cache[56] = $event => ($options.onTimePickerElementMouseLeave())),
-                              onKeyup: [
-                                _cache[59] || (_cache[59] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["enter"])),
-                                _cache[60] || (_cache[60] = vue.withKeys($event => ($options.onTimePickerElementMouseUp($event)), ["space"]))
-                              ],
-                              type: "button"
-                            }, [
-                              _hoisted_26
-                            ], 40, ["disabled"]), [
-                              [_directive_ripple]
-                            ])
-                          ]))
-                        : vue.createCommentVNode("", true),
-                      ($props.hourFormat=='12')
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_27, [
-                            vue.createVNode("span", null, vue.toDisplayString($props.timeSeparator), 1)
-                          ]))
-                        : vue.createCommentVNode("", true),
-                      ($props.hourFormat=='12')
-                        ? (vue.openBlock(), vue.createBlock("div", _hoisted_28, [
-                            vue.withDirectives(vue.createVNode("button", {
-                              class: "p-link",
-                              onClick: _cache[61] || (_cache[61] = $event => ($options.toggleAMPM($event))),
-                              type: "button",
-                              disabled: _ctx.$attrs.disabled
-                            }, [
-                              _hoisted_29
-                            ], 8, ["disabled"]), [
-                              [_directive_ripple]
-                            ]),
-                            vue.createVNode("span", null, vue.toDisplayString($data.pm ? 'PM' : 'AM'), 1),
-                            vue.withDirectives(vue.createVNode("button", {
-                              class: "p-link",
-                              onClick: _cache[62] || (_cache[62] = $event => ($options.toggleAMPM($event))),
-                              type: "button",
-                              disabled: _ctx.$attrs.disabled
-                            }, [
-                              _hoisted_30
-                            ], 8, ["disabled"]), [
-                              [_directive_ripple]
-                            ])
-                          ]))
-                        : vue.createCommentVNode("", true)
-                    ]))
-                  : vue.createCommentVNode("", true),
-                ($props.showButtonBar)
-                  ? (vue.openBlock(), vue.createBlock("div", _hoisted_31, [
-                      vue.createVNode(_component_CalendarButton, {
-                        type: "button",
-                        label: $options.todayLabel,
-                        onClick: _cache[63] || (_cache[63] = $event => ($options.onTodayButtonClick($event))),
-                        class: "p-button-text",
-                        onKeydown: $options.onContainerButtonKeydown
-                      }, null, 8, ["label", "onKeydown"]),
-                      vue.createVNode(_component_CalendarButton, {
-                        type: "button",
-                        label: $options.clearLabel,
-                        onClick: _cache[64] || (_cache[64] = $event => ($options.onClearButtonClick($event))),
-                        class: "p-button-text",
-                        onKeydown: $options.onContainerButtonKeydown
-                      }, null, 8, ["label", "onKeydown"])
-                    ]))
-                  : vue.createCommentVNode("", true),
-                vue.renderSlot(_ctx.$slots, "footer")
-              ], 42, ["role"]))
-            : vue.createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 8, ["onAfterEnter", "onAfterLeave", "onLeave"])
-    ], 8, ["to", "disabled"]))
+                            ]))
+                          : vue.createCommentVNode("", true)
+                      ]))
+                    : vue.createCommentVNode("", true),
+                  ($props.showButtonBar)
+                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_56, [
+                        vue.createVNode(_component_CalendarButton, {
+                          type: "button",
+                          label: $options.todayLabel,
+                          onClick: _cache[62] || (_cache[62] = $event => ($options.onTodayButtonClick($event))),
+                          class: "p-button-text",
+                          onKeydown: $options.onContainerButtonKeydown
+                        }, null, 8, ["label", "onKeydown"]),
+                        vue.createVNode(_component_CalendarButton, {
+                          type: "button",
+                          label: $options.clearLabel,
+                          onClick: _cache[63] || (_cache[63] = $event => ($options.onClearButtonClick($event))),
+                          class: "p-button-text",
+                          onKeydown: $options.onContainerButtonKeydown
+                        }, null, 8, ["label", "onKeydown"])
+                      ]))
+                    : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "footer")
+                ], 42, _hoisted_2))
+              : vue.createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["onAfterEnter", "onAfterLeave", "onLeave"])
+      ]),
+      _: 3
+    }, 8, ["appendTo", "disabled"])
   ], 6))
 }