From 802fe4c8d43dc67f931735a840acd3b306691bff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 11 Jun 2024 11:37:34 +0300 Subject: [PATCH] feat(datepicker): add disabled dates styles --- demo/index.html | 2 +- dist/js/datepicker-full.js | 6 ++- dist/js/datepicker.js | 6 ++- js/picker/views/DaysView.js | 6 ++- package-lock.json | 81 ++++++++++++++++++++++++++++++++++--- 5 files changed, 88 insertions(+), 13 deletions(-) diff --git a/demo/index.html b/demo/index.html index 779560c..33bb785 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,5 +1,5 @@ - + diff --git a/dist/js/datepicker-full.js b/dist/js/datepicker-full.js index 17e52c4..74f7b23 100644 --- 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 index 451fa52..9a5b4a1 100644 --- 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 index 88a7ca4..49b9b63 100644 --- 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 index 1402685..380d3a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "flowbite-datepicker", - "version": "1.2.1", + "version": "1.2.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "flowbite-datepicker", - "version": "1.2.1", + "version": "1.2.6", "license": "MIT", "dependencies": { "flowbite": "^2.0.0" @@ -3320,6 +3320,13 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "dev": true, + "peer": true + }, "node_modules/js-yaml": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", @@ -4034,6 +4041,16 @@ "node": ">=10" } }, + "node_modules/motion-ui": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/motion-ui/-/motion-ui-2.0.5.tgz", + "integrity": "sha512-MJs4dS7/bSnJ92X5IB4bTIif6SwqwEDbX1F/eiUGSzIVhVTl4UqD8xr8ygg01dXZrpPrDjjUNoVkB8vT+PaY/g==", + "dev": true, + "peer": true, + "peerDependencies": { + "jquery": ">=3.6.0" + } + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -4515,6 +4532,18 @@ "node": ">= 6" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -7304,6 +7333,13 @@ "node": ">=10.4" } }, + "node_modules/what-input": { + "version": "5.2.12", + "resolved": "https://registry.npmjs.org/what-input/-/what-input-5.2.12.tgz", + "integrity": "sha512-3yrSa7nGSXGJS6wZeSkO6VNm95pB1mZ9i3wFzC1hhY7mn4/afue/MvXz04OXNdBC8bfo4AB4RRd3Dem9jXM58Q==", + "dev": true, + "peer": true + }, "node_modules/whatwg-encoding": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz", @@ -8240,13 +8276,15 @@ "version": "npm:bootstrap@4.6.2", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", - "dev": true + "dev": true, + "requires": {} }, "bootstrap5": { "version": "npm:bootstrap@5.3.2", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", - "dev": true + "dev": true, + "requires": {} }, "boxen": { "version": "4.2.0", @@ -9503,7 +9541,8 @@ "version": "6.8.1", "resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.8.1.tgz", "integrity": "sha512-9JAuLqVgzf7EIRUqVKeYN68dU/SGe0aNJPgnejdfJKSWnBFdQLF3Zvy9WEQ1gE/gnyvwG3Ia3LkkEd9774n0bQ==", - "dev": true + "dev": true, + "requires": {} }, "fraction.js": { "version": "4.3.7", @@ -10261,6 +10300,13 @@ "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", "dev": true }, + "jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "dev": true, + "peer": true + }, "js-yaml": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", @@ -10804,6 +10850,14 @@ } } }, + "motion-ui": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/motion-ui/-/motion-ui-2.0.5.tgz", + "integrity": "sha512-MJs4dS7/bSnJ92X5IB4bTIif6SwqwEDbX1F/eiUGSzIVhVTl4UqD8xr8ygg01dXZrpPrDjjUNoVkB8vT+PaY/g==", + "dev": true, + "peer": true, + "requires": {} + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -11162,6 +11216,13 @@ "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", "dev": true }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "dev": true, + "peer": true + }, "postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -13294,6 +13355,13 @@ "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==", "dev": true }, + "what-input": { + "version": "5.2.12", + "resolved": "https://registry.npmjs.org/what-input/-/what-input-5.2.12.tgz", + "integrity": "sha512-3yrSa7nGSXGJS6wZeSkO6VNm95pB1mZ9i3wFzC1hhY7mn4/afue/MvXz04OXNdBC8bfo4AB4RRd3Dem9jXM58Q==", + "dev": true, + "peer": true + }, "whatwg-encoding": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz", @@ -13477,7 +13545,8 @@ "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "dev": true + "dev": true, + "requires": {} }, "xdg-basedir": { "version": "4.0.0",