diff --git a/js/picker/views/DaysView.js b/js/picker/views/DaysView.js
index 88a7ca4..f9b1a05 100644
--- a/js/picker/views/DaysView.js
+++ b/js/picker/views/DaysView.js
@@ -164,10 +164,24 @@ export default class DaysView extends View {
         classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
       }
       if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
-        classList.add('disabled', 'cursor-not-allowed');
+        classList.remove(
+          'text-gray-900',
+          'dark:text-white',
+          'hover:bg-gray-100',
+          'dark:hover:bg-gray-600',
+          'cursor-pointer',
+        );
+        classList.add('disabled', 'text-gray-500', 'dark:text-gray-400', 'cursor-not-allowed');
       }
       if (this.daysOfWeekDisabled.includes(day)) {
-        classList.add('disabled', 'cursor-not-allowed');
+        classList.remove(
+          'text-gray-900',
+          'dark:text-white',
+          'hover:bg-gray-100',
+          'dark:hover:bg-gray-600',
+          'cursor-pointer',
+        );
+        classList.add('disabled', 'text-gray-500', 'dark:text-gray-400', 'cursor-not-allowed');
         pushUnique(this.disabled, current);
       }
       if (this.daysOfWeekHighlighted.includes(day)) {
diff --git a/js/picker/views/MonthsView.js b/js/picker/views/MonthsView.js
index 1c78cdd..edad81f 100644
--- a/js/picker/views/MonthsView.js
+++ b/js/picker/views/MonthsView.js
@@ -129,7 +129,14 @@ export default class MonthsView extends View {
         || isMinYear && index < this.minMonth
         || isMaxYear && index > this.maxMonth
       ) {
-        classList.add('disabled');
+        classList.remove(
+          'text-gray-900',
+          'dark:text-white',
+          'hover:bg-gray-100',
+          'dark:hover:bg-gray-600',
+          'cursor-pointer',
+        );
+        classList.add('disabled', 'text-gray-500', 'dark:text-gray-400', 'cursor-not-allowed');
       }
       if (range) {
         const [rangeStart, rangeEnd] = range;
diff --git a/js/picker/views/YearsView.js b/js/picker/views/YearsView.js
index 59a2974..91e647a 100644
--- a/js/picker/views/YearsView.js
+++ b/js/picker/views/YearsView.js
@@ -101,7 +101,14 @@ export default class YearsView extends View {
         classList.add('next');
       }
       if (current < this.minYear || current > this.maxYear) {
-        classList.add('disabled');
+        classList.remove(
+          'text-gray-900',
+          'dark:text-white',
+          'hover:bg-gray-100',
+          'dark:hover:bg-gray-600',
+          'cursor-pointer',
+        );
+        classList.add('disabled', 'text-gray-500', 'dark:text-gray-400', 'cursor-not-allowed');
       }
       if (this.range) {
         const [rangeStart, rangeEnd] = this.range;