nzambello/work-timer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: highlight today in calendar + monday is 1st day of week

Browse source
This commit is contained in:
Nicola Zambello 2023-02-20 15:13:21 +01:00
parent a6a9ce4c0d
commit ac7f544512
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
2 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/routes/time-entries/$timeEntryId.tsx
View file

@ -326,6 +326,24 @@ export default function TimeEntryDetailsPage() {
newDate.setDate(date.getDate()); newDate.setDate(date.getDate());
setStart(newDate); setStart(newDate);
}} }}
firstDayOfWeek="monday"
renderDay={(date) => {
const day = date.getDate();
const today = new Date();
const isToday =
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear();
return isToday ? (
<Text component="div" weight="bold" underline>
{day}
</Text>
) : (
<Text component="div">{day}</Text>
);
}}
/> />
<TimeInput <TimeInput
id="new-startTime-time" id="new-startTime-time"
@ -390,6 +408,24 @@ export default function TimeEntryDetailsPage() {
newDate.setDate(date.getDate()); newDate.setDate(date.getDate());
setEnd(newDate); setEnd(newDate);
}} }}
firstDayOfWeek="monday"
renderDay={(date) => {
const day = date.getDate();
const today = new Date();
const isToday =
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear();
return isToday ? (
<Text component="div" weight="bold" underline>
{day}
</Text>
) : (
<Text component="div">{day}</Text>
);
}}
/> />
<TimeInput <TimeInput
id="new-endTime-time" id="new-endTime-time"

36
app/routes/time-entries/new.tsx
View file

@ -312,6 +312,7 @@ export default function NewTimeEntryPage() {
locale="it" locale="it"
placeholder="Start date" placeholder="Start date"
label="Start date" label="Start date"
firstDayOfWeek="monday"
aria-invalid={actionData?.errors?.startTime ? true : undefined} aria-invalid={actionData?.errors?.startTime ? true : undefined}
error={actionData?.errors?.startTime} error={actionData?.errors?.startTime}
errorProps={{ children: actionData?.errors?.startTime }} errorProps={{ children: actionData?.errors?.startTime }}
@ -324,6 +325,23 @@ export default function NewTimeEntryPage() {
newDate.setDate(date.getDate()); newDate.setDate(date.getDate());
setStart(newDate); setStart(newDate);
}} }}
renderDay={(date) => {
const day = date.getDate();
const today = new Date();
const isToday =
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear();
return isToday ? (
<Text component="div" weight="bold" underline>
{day}
</Text>
) : (
<Text component="div">{day}</Text>
);
}}
/> />
<TimeInput <TimeInput
id="new-startTime-time" id="new-startTime-time"
@ -371,6 +389,7 @@ export default function NewTimeEntryPage() {
locale="it" locale="it"
placeholder="End date" placeholder="End date"
label="End date" label="End date"
firstDayOfWeek="monday"
aria-invalid={actionData?.errors?.endTime ? true : undefined} aria-invalid={actionData?.errors?.endTime ? true : undefined}
error={actionData?.errors?.endTime} error={actionData?.errors?.endTime}
errorProps={{ children: actionData?.errors?.endTime }} errorProps={{ children: actionData?.errors?.endTime }}
@ -383,6 +402,23 @@ export default function NewTimeEntryPage() {
newDate.setDate(date.getDate()); newDate.setDate(date.getDate());
setEnd(newDate); setEnd(newDate);
}} }}
renderDay={(date) => {
const day = date.getDate();
const today = new Date();
const isToday =
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear();
return isToday ? (
<Text component="div" weight="bold" underline>
{day}
</Text>
) : (
<Text component="div">{day}</Text>
);
}}
/> />
<TimeInput <TimeInput
id="new-endTime-time" id="new-endTime-time"