From 84e8f62ec3998c5b68e12502a0849a9a0b09495b Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 24 Feb 2025 14:35:27 +1100
Subject: [PATCH] feat: enhance month availability checks in SingleDatePicker
 component

---
 src/components/SingleDatePicker.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue
index cf0ec27..c51e72f 100644
--- a/src/components/SingleDatePicker.vue
+++ b/src/components/SingleDatePicker.vue
@@ -115,7 +115,13 @@
 		if (currentYear.value < 100) currentYear.value = parseInt(`20${currentYear.value}`)
 	}
 
-	function monthNotAvailable() {
+	function monthNotAvailable(month: number): boolean {
+		// When the last day of a month not inside the range of available dates
+		const lastDayOfMonth = new Date(currentYear.value, month + 1, 0)
+		if (availableRangeStart.value && lastDayOfMonth < availableRangeStart.value) return true
+		// When the first day of a month not inside the range of available dates
+		const firstDayOfMonth = new Date(currentYear.value, month, 1)
+		if (availableRangeEnd.value && firstDayOfMonth > availableRangeEnd.value) return true
 		return false
 	}
 
@@ -185,15 +191,15 @@
 				<div class='__datenel_month-selector-body'>
 					<button
 						v-for="(_, index) in 12"
-						:class="`__datenel_item ${monthNotAvailable() && '__datenel_not-available'}`"
+						:class="`__datenel_item ${monthNotAvailable(index) && '__datenel_not-available'} ${currentMonth === index && '__datenel_active'}`"
 						key={index}
 						@click="() => {
 							currentMonth = index
 							selectMonth = false
 						}"
 						:aria-label="`Go to ${new Date(currentYear, index).toLocaleString(localization, { month: 'long' })} of the year ${currentYear}`"
-						:disabled="monthNotAvailable()"
-						:aria-hidden="monthNotAvailable()"
+						:disabled="monthNotAvailable(index)"
+						:aria-hidden="monthNotAvailable(index)"
 					>
 						{{new Date(currentYear, index).toLocaleString(localization, { month: 'long' })}}
 					</button>