From 04dd1134abd17ef721347fb71f36a4b77d576e19 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Thu, 20 Feb 2025 19:14:18 +1100
Subject: [PATCH] feat: add year navigation and month selection to
 SingleWeekPicker component

---
 src/components/SingleWeekPicker.tsx | 38 ++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/SingleWeekPicker.tsx b/src/components/SingleWeekPicker.tsx
index db9f862..4c4e82b 100644
--- a/src/components/SingleWeekPicker.tsx
+++ b/src/components/SingleWeekPicker.tsx
@@ -120,8 +120,44 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
 		setSelectedWeek(calculateWeekNum(date))
 	}
 
+	function changeYear(year: string) {
+		if (isNaN(Number(year))) return
+		if (Number(year) < 0) return
+		setCurrentYear(Number(year))
+	}
+
+	function adjustYear() {
+		if (currentYear < 100) setCurrentYear(Number(`20${currentYear}`))
+	}
+
 	if (selectMonth) {
-		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}></div>
+		return <div className='datenel-component' role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" id={`__datenel-${uniqueId}`}>
+			<div className='header'>
+				<button className='stepper' onClick={() => {
+					if (currentYear <= 100) return
+					setCurrentYear(currentYear - 1)
+				}} aria-label={`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`}><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>
+				<input className='indicator'
+					value={currentYear}
+					onChange={e => changeYear(e.target.value)}
+					onBlur={adjustYear}
+					aria-label="Year input, type a year to go to that year"
+				/>
+				<button className='stepper' onClick={() => {
+					setCurrentYear(currentYear + 1)
+				}} aria-label={`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`}> <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 className='body'>
+				<div className='month-selector-body'>
+					{Array.from({ length: 12 }).map((_, index) => <button className={`item`} key={index} onClick={() => {
+						setCurrentMonth(index)
+						setSelectMonth(false)
+					}} aria-label={`Go to ${new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} of the year ${currentYear}`}>
+						{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
+					</button>)}
+				</div>
+			</div>
+		</div>
 	} else {
 		return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>