Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for week input in Chrome and Edge browsers

Browse source
This commit is contained in:
Davenludd 2024-03-20 15:19:09 +01:00
parent eddf678f3a
commit 54e42cd2a8
1 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/Components/NewWeeklyReport.tsx
View file

@ -38,6 +38,7 @@ export default function NewWeeklyReport(): JSX.Element {
};
const navigate = useNavigate();
const isChromeOrEdge = /Chrome|Edg/.test(navigator.userAgent);
return (
<>
@ -55,23 +56,48 @@ export default function NewWeeklyReport(): JSX.Element {
}}
>
<div className="flex flex-col items-center">
<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"
placeholder="Week"
onChange={(e) => {
const weekNumber = parseInt(e.target.value.split("-W")[1]);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
{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"
placeholder="Week"
onChange={(e) => {
const weekNumber = parseInt(e.target.value.split("-W")[1]);
setWeek(weekNumber);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
onPaste={(event) => {
event.preventDefault();
}}
onPaste={(event) => {
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>