From 4513d9a1cedfc17b5a1677eab19a11a3f4f39340 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Thu, 20 Feb 2025 10:02:37 +1100
Subject: [PATCH] fix: disable date selection for non-current months

---
 playground/app.tsx                  | 5 -----
 src/components/SingleDatePicker.tsx | 1 +
 src/style.scss                      | 1 +
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/playground/app.tsx b/playground/app.tsx
index 65591aa..c26d28d 100644
--- a/playground/app.tsx
+++ b/playground/app.tsx
@@ -20,11 +20,6 @@ export default () => {
 				onSelect={onSelect}
 				localization="zh-CN"
 				onClose={() => alert('close')}
-				mainColor='#424c50'
-				accentColor='#424c50'
-				reversedColor='#e9f1f6'
-				hoverColor='#e9e7ef44'
-				borderColor='#758a9944'
 			/>
 		</div>
 	</div>)
diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index c76e332..d1184e9 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -194,6 +194,7 @@ export default ({ value, onSelect, localization, onClose, mainColor = '#000000',
 					aria-label={`${date.toLocaleString(localization || navigator.language, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ", this is today" : ""}, click to select this date`}
 					tabIndex={currentMonth !== date.getMonth() ? -1 : 0}
 					aria-hidden={currentMonth !== date.getMonth()}
+					disabled={currentMonth !== date.getMonth()}
 				>
 					{date.getDate()}
 					{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
diff --git a/src/style.scss b/src/style.scss
index 0b6995e..d8b02cf 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -87,6 +87,7 @@
 			position: relative;
 			&.extra-month {
 				opacity: 0.3;
+				cursor: default;
 			}
 			&:hover {
 				background: var(--datenel-hover-color);