Merge pull request #801 from CareTogether/date-only-frontend

Date only frontend

src/caretogether-pwa/src/Referrals/Arrangements/ArrangementCardTitle.tsx

@@ -13,7 +13,7 @@ import { EndArrangementDialog } from './EndArrangementDialog';
 import { StartArrangementDialog } from './StartArrangementDialog';
 import { useInlineEditor } from '../../Hooks/useInlineEditor';
 import { useReferralsModel } from '../../Model/ReferralsModel';
-import { DateTimePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers';
 import { DeleteArrangementDialog } from './DeleteArrangementDialog';
 
 type ArrangementCardTitleProps = {
@@ -115,11 +115,11 @@ export function ArrangementCardTitle({
                 <>
                   {startedAtEditor.editing ? (
                     <>
-                      <DateTimePicker
-                        label="When was this arrangement started?"
+                      <DatePicker
+                        label="When was this arrangement started???"
                         value={startedAtEditor.value}
                         disableFuture
-                        format="M/d/yyyy h:mm a"
+                        format="M/d/yyyy"
                         onChange={(date: Date | null) =>
                           date && startedAtEditor.setValue(date)
                         }

src/caretogether-pwa/src/Referrals/Arrangements/CancelArrangementDialog.tsx

@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material';
-import { DateTimePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers';
 import { useState } from 'react';
 import { useParams } from 'react-router';
 import { Arrangement, Person } from '../../GeneratedClient';
@@ -52,11 +52,11 @@ export function CancelArrangementDialog({
     >
       <Grid container spacing={0}>
         <Grid item xs={12}>
-          <DateTimePicker
+          <DatePicker
             label="When was this arrangement cancelled?"
             value={cancelledAtLocal}
             disableFuture
-            format="M/d/yyyy h:mm a"
+            format="M/d/yyyy"
             onChange={(date: Date | null) =>
               date && setFields({ ...fields, cancelledAtLocal: date })
             }

src/caretogether-pwa/src/Requirements/CompletedRequirementRow.tsx

@@ -44,12 +44,7 @@ export function CompletedRequirementRow({
         ? permissions(Permission.EditArrangementRequirementCompletion)
         : permissions(Permission.EditApprovalRequirementCompletion);
 
-  const dateFormat =
-    context.kind === 'Arrangement' ||
-    context.kind === 'Family Volunteer Assignment' ||
-    context.kind === 'Individual Volunteer Assignment'
-      ? 'M/d/yy h:mm a'
-      : 'M/d/yy';
+  const dateFormat = 'M/d/yy';
 
   const familyLookup = useFamilyLookup();
   const personLookup = usePersonLookup();

src/caretogether-pwa/src/Requirements/MissingArrangementRequirementRow.tsx

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import { useRecoilValue } from 'recoil';
 import { MissingArrangementRequirement, Permission } from '../GeneratedClient';
 import { policyData } from '../Model/ConfigurationModel';
@@ -10,6 +9,7 @@ import { PersonName } from '../Families/PersonName';
 import { IconRow } from '../Generic/IconRow';
 import { MissingRequirementDialog } from './MissingRequirementDialog';
 import { RequirementContext } from './RequirementContext';
+import { formatUtcDateOnly } from '../Utilities/dateUtils';
 
 type MissingArrangementRequirementRowProps = {
   requirement: MissingArrangementRequirement;
@@ -60,7 +60,7 @@ export function MissingArrangementRequirementRow({
         >
           {requirement.actionName}     
           <span style={{ float: 'right' }}>
-            {format(requirement.dueBy, 'M/d/yy h:mm a')}
+            {formatUtcDateOnly(requirement.dueBy)}
           </span>
           {requirement.volunteerFamilyId && !requirement.personId && (
             <>
@@ -96,7 +96,7 @@ export function MissingArrangementRequirementRow({
           {requirement.actionName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           {requirement.pastDueSince && (
             <span style={{ float: 'right' }}>
-              {format(requirement.pastDueSince, 'M/d/yy h:mm a')}
+              {formatUtcDateOnly(requirement.pastDueSince)}
             </span>
           )}
           {requirement.volunteerFamilyId && !requirement.personId && (

src/caretogether-pwa/src/Requirements/MissingRequirementDialog.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, DateTimePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers';
 import {
   Checkbox,
   DialogContentText,
@@ -434,11 +434,11 @@ export function MissingRequirementDialog({
           )}
           <Grid item xs={12}>
             {requirement instanceof MissingArrangementRequirement ? (
-              <DateTimePicker
+              <DatePicker
                 label="When was this requirement completed?"
                 value={completedAtLocal}
                 disableFuture
-                format="M/d/yyyy h:mm a"
+                format="MM/dd/yyyy"
                 onChange={(date: Date | null) =>
                   date && setCompletedAtLocal(date)
                 }

src/caretogether-pwa/src/Utilities/dateUtils.tsx

@@ -0,0 +1,7 @@
+export function formatUtcDateOnly(input: Date) {
+  // format date only to en-US date format, wihtout time zone offsetting
+  // 2025-11-22T00:00:00.000Z will output 11/22/2025, independently of browser's time zone
+  return new Intl.DateTimeFormat('en-US', {
+    timeZone: 'UTC',
+  }).format(input);
+}