From 923f236d4c133fa2474bf2c600d9482c98f65d7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Tue, 1 Mar 2022 16:56:10 +0300 Subject: [PATCH] Fixed #2239 - Material Calendar | Disabled Calendar getting opacity twice --- public/themes/md-dark-deeppurple/theme.css | 19 ++++++++++++++----- public/themes/md-dark-indigo/theme.css | 19 ++++++++++++++----- public/themes/md-light-deeppurple/theme.css | 19 ++++++++++++++----- public/themes/md-light-indigo/theme.css | 19 ++++++++++++++----- public/themes/mdc-dark-deeppurple/theme.css | 19 ++++++++++++++----- public/themes/mdc-dark-indigo/theme.css | 19 ++++++++++++++----- public/themes/mdc-light-deeppurple/theme.css | 19 ++++++++++++++----- public/themes/mdc-light-indigo/theme.css | 19 ++++++++++++++----- src/components/calendar/Calendar.vue | 1 + 9 files changed, 113 insertions(+), 40 deletions(-) diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index dd2c963ef..c1b741f25 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(255, 255, 255, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #CE93D8; box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 119caef60..a60d8431c 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(255, 255, 255, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #9FA8DA; box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index f2774d79b..ee4fceeee 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(0, 0, 0, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #673AB7; box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: #ececec; border-color: transparent; background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: #dcdcdc; border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index c1bbd3832..ebff2d9dd 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(0, 0, 0, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #3F51B5; box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: #ececec; border-color: transparent; background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: #dcdcdc; border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 20828a397..a581d28f3 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(255, 255, 255, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #CE93D8; box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 4eb804712..95aab3205 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(255, 255, 255, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(255, 255, 255, 0.6); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #9FA8DA; box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index ca3bc9431..21346ba86 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(0, 0, 0, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #673AB7; box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: #ececec; border-color: transparent; background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: #dcdcdc; border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index ed8fabca1..d3d767629 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -5974,13 +5974,22 @@ .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus { background: rgba(0, 0, 0, 0.12); } -.p-calendar-w-btn:not(.p-disabled):hover { +.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled { + background-color: transparent !important; +} +.p-calendar-w-btn:not(.p-calendar-disabled):hover { border-color: rgba(0, 0, 0, 0.87); } -.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-focus { border-color: #3F51B5; box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } +.p-calendar-w-btn.p-calendar-disabled { + opacity: 0.38; +} +.p-calendar-w-btn.p-calendar-disabled .p-inputtext { + opacity: 1; +} .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -6035,18 +6044,18 @@ background-image: none; background: transparent; } -.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { background-color: #ececec; border-color: transparent; background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } -.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; background-color: #dcdcdc; border-color: transparent; background-size: 100% 2px, 100% 1px; } -.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus { +.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus { background-image: none; background: transparent; } diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index a7419e09b..bc8a8b582 100755 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -2311,6 +2311,7 @@ export default { { 'p-calendar-w-btn': this.showIcon, 'p-calendar-timeonly': this.timeOnly, + 'p-calendar-disabled': this.$attrs.disabled, 'p-inputwrapper-filled': this.modelValue, 'p-inputwrapper-focus': this.focused }