From 1b8ca241c8e04f29fe53b358c8e90c1dc975ad5e Mon Sep 17 00:00:00 2001
From: eireland <eireland@concord.org>
Date: Fri, 26 Apr 2024 15:45:45 -0700
Subject: [PATCH] Changes calendar year selection to a dropdown selector
 instead of number input.

---
 src/components/date-range/calendar-header.tsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/date-range/calendar-header.tsx b/src/components/date-range/calendar-header.tsx
index b2c1f96..eebc443 100644
--- a/src/components/date-range/calendar-header.tsx
+++ b/src/components/date-range/calendar-header.tsx
@@ -59,7 +59,7 @@ export const CalendarHeader = ({calendarType, handleSelectCalendar}: ICalendarHe
     handleSelectCalendar();
   };
 
-  const handleYearChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newYear = Number(e.target.value);
     handleSetDate(new Date(newYear, month, day));
     handleSelectCalendar();
@@ -80,15 +80,15 @@ export const CalendarHeader = ({calendarType, handleSelectCalendar}: ICalendarHe
                   );
                 })}
               </select>
-              <input
-                className={`year select`}
-                value={year}
-                type="number"
-                min={1850}
-                max={new Date().getFullYear()}
-                step={1}
-                onChange={handleYearChange}
-              />
+              <select className={`year select`} value={year} onChange={handleYearChange}>
+                {Array.from({length: new Date().getFullYear() - 1850 + 1}, (_, i) => i + 1850).map((_year, ix) => {
+                  return (
+                    <option key={ix} value={_year}>
+                      {_year}
+                    </option>
+                  );
+                })}
+              </select>
             </div>
             <div className={`arrow next`} onClick={handleNext}><ArrowForwardIosIcon/></div>
         </div>