Add support for week input in Chrome and Edge browsers
This commit is contained in:
parent
eddf678f3a
commit
54e42cd2a8
1 changed files with 42 additions and 16 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue