feat(datepicker): add disabled dates styles

themesberg · Jun 11, 2024 · 802fe4c · 802fe4c
1 parent 658b8cc
commit 802fe4c
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 13 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="dark" dir="rtl">
+<html class="">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

diff --git a/dist/js/datepicker-full.js b/dist/js/datepicker-full.js
@@ -998,10 +998,12 @@
           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.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+          classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
         }
         if (this.daysOfWeekDisabled.includes(day)) {
-          classList.add('disabled', 'cursor-not-allowed');
+          classList.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+          classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
           pushUnique(this.disabled, current);
         }
         if (this.daysOfWeekHighlighted.includes(day)) {

diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
@@ -998,10 +998,12 @@ var Datepicker = (function () {
           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.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+          classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
         }
         if (this.daysOfWeekDisabled.includes(day)) {
-          classList.add('disabled', 'cursor-not-allowed');
+          classList.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+          classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
           pushUnique(this.disabled, current);
         }
         if (this.daysOfWeekHighlighted.includes(day)) {

diff --git a/js/picker/views/DaysView.js b/js/picker/views/DaysView.js
@@ -164,10 +164,12 @@ 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.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+        classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
       }
       if (this.daysOfWeekDisabled.includes(day)) {
-        classList.add('disabled', 'cursor-not-allowed');
+        classList.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
+        classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
         pushUnique(this.disabled, current);
       }
       if (this.daysOfWeekHighlighted.includes(day)) {

diff --git a/package-lock.json b/package-lock.json