Add support for week input in Chrome and Edge browsers

frontend/src/Components/NewWeeklyReport.tsx

@@ -38,6 +38,7 @@ export default function NewWeeklyReport(): JSX.Element {
   };
 
   const navigate = useNavigate();
+  const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);
 
   return (
     <>
@@ -55,6 +56,7 @@ export default function NewWeeklyReport(): JSX.Element {
           }}
         >
           <div className="flex flex-col items-center">
+            {isChromeOrEdge ? (
               <input
                 className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
                 type="week"
@@ -72,6 +74,30 @@ export default function NewWeeklyReport(): JSX.Element {
                   event.preventDefault();
                 }}
               />
+            ) : (
+              <input
+                className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
+                type="text"
+                placeholder="Week (Numbers Only)"
+                onChange={(e) => {
+                  const weekNumber = parseInt(e.target.value);
+                  if (isNaN(weekNumber) || weekNumber < 1 || weekNumber > 53) {
+                    setWeek(0);
+                    return;
+                  } else {
+                    setWeek(weekNumber);
+                  }
+                }}
+                onKeyDown={(event) => {
+                  const keyValue = event.key;
+                  if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                    event.preventDefault();
+                }}
+                onPaste={(event) => {
+                  event.preventDefault();
+                }}
+              />
+            )}
             <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
               <thead>
                 <tr>