From 1370818496db1887b894bffa4847f51122c540e7 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 24 Feb 2025 10:58:50 +1100
Subject: [PATCH] feat: add month navigation functionality to SingleDatePicker
 component

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

diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue
index 4fbcd76..97c0d29 100644
--- a/src/components/SingleDatePicker.vue
+++ b/src/components/SingleDatePicker.vue
@@ -4,17 +4,38 @@
 
 	const selectMonth = ref(false)
 	const uniqueId = generateUniqueId()
+	const currentMonth = ref(new Date().getMonth())
+	const currentYear = ref(new Date().getFullYear())
+
+	function goToLastMonth() {
+		if (currentMonth.value === 0) {
+			currentMonth.value = 11
+			currentYear.value -= 1
+		} else {
+			currentMonth.value -= 1
+		}
+	}
+
+	function goToNextMonth() {
+		if (currentMonth.value === 11) {
+			currentMonth.value = 0
+			currentYear.value += 1
+		} else {
+			currentMonth.value += 1
+		}
+	}
+
 </script>
 
 <template>
 	<div :id="`__datenel_${uniqueId}`">
 		<div class='datenel-component' role="dialog" aria-label="Date selection panel" v-if="!selectMonth">
 			<div className='__datenel_header'>
-				<button className='__datenel_stepper' @click="() => {}" :aria-label="`Go to last month, `"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
-				<button className='__datenel_indicator' @click="() => {}" :aria-label="`You are now at . Click here to quick-select month or year.`">
-					Feb 2025
+				<button className='__datenel_stepper' @click="goToLastMonth()" :aria-label="`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></button>
+				<button className='__datenel_indicator' @click="selectMonth = true" :aria-label="`You are now at . Click here to quick-select month or year.`">
+					{{  new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' }) }}
 				</button>
-				<button className='__datenel_stepper' @click="() => {}" :aria-label="`Go to next month, `"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
+				<button className='__datenel_stepper' @click="goToNextMonth()" :aria-label="`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
 		</div>
 	</div>