From 3af0524bc9100241b44a50e463e3dd5e2a47c811 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 11 Sep 2024 14:28:32 -0400
Subject: [PATCH 01/18] input error text

---
 src/common/components/Input/Input.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/components/Input/Input.tsx b/src/common/components/Input/Input.tsx
index 026dd02..1c21626 100644
--- a/src/common/components/Input/Input.tsx
+++ b/src/common/components/Input/Input.tsx
@@ -29,6 +29,7 @@ interface InputProps
 const Input = forwardRef<HTMLIonInputElement, InputProps>(
   ({ className, testid = 'input', ...props }: InputProps, ref): JSX.Element => {
     const [field, meta, helpers] = useField(props.name);
+    const errorText: string | undefined = meta.touched ? meta.error : undefined;
 
     return (
       <IonInput
@@ -44,7 +45,7 @@ const Input = forwardRef<HTMLIonInputElement, InputProps>(
         data-testid={testid}
         {...field}
         {...props}
-        errorText={meta.error}
+        errorText={errorText}
         ref={ref}
       ></IonInput>
     );

From 7fe015bdd07bef5aad3140cb0e7172bffceb1956 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 11 Sep 2024 14:28:54 -0400
Subject: [PATCH 02/18] initial DatetimeInput component

---
 .../components/Input/DatetimeInput.scss       |  12 ++
 src/common/components/Input/DatetimeInput.tsx | 132 ++++++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 src/common/components/Input/DatetimeInput.scss
 create mode 100644 src/common/components/Input/DatetimeInput.tsx

diff --git a/src/common/components/Input/DatetimeInput.scss b/src/common/components/Input/DatetimeInput.scss
new file mode 100644
index 0000000..b1f73df
--- /dev/null
+++ b/src/common/components/Input/DatetimeInput.scss
@@ -0,0 +1,12 @@
+ion-input.ls-datetime-input {
+  input {
+    cursor: pointer;
+  }
+}
+
+ion-modal.ls-datetime-modal {
+  --height: fit-content;
+  --width: fit-content;
+
+  --border-radius: 0.5rem;
+}
diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
new file mode 100644
index 0000000..d7361b1
--- /dev/null
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -0,0 +1,132 @@
+import { ComponentPropsWithoutRef, useState } from 'react';
+import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
+import { useField } from 'formik';
+import classNames from 'classnames';
+
+import './DatetimeInput.scss';
+import { PropsWithTestId } from '../types';
+import Input from './Input';
+import Icon, { IconName } from '../Icon/Icon';
+import dayjs from 'dayjs';
+
+const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+};
+
+type DatetimeValue = string | string[] | null;
+
+interface DatetimeInputProps
+  extends PropsWithTestId,
+    Pick<ComponentPropsWithoutRef<typeof Input>, 'label' | 'labelPlacement'>,
+    Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>,
+    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
+
+const DatetimeInput = ({
+  className,
+  label,
+  labelPlacement,
+  testid = 'input-datetime',
+  ...datetimeProps
+}: DatetimeInputProps): JSX.Element => {
+  const [field, meta, helpers] = useField(datetimeProps.name);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [internalValue, setInternalValue] = useState<DatetimeValue | undefined>(field.value);
+
+  const errorText: string | undefined = meta.touched ? meta.error : undefined;
+
+  console.log(`meta::${JSON.stringify(meta)}`);
+
+  const onChange = async (e: DatetimeCustomEvent) => {
+    console.log(`DatetimeInput::onChange::value::${e.detail.value}`);
+    helpers.setTouched(true);
+    const value = e.detail.value;
+    if (value) {
+      if (Array.isArray(value)) {
+        setInternalValue(value.map((val) => dayjs(val).toISOString()));
+      } else {
+        setInternalValue(dayjs(value).toISOString());
+      }
+    } else {
+      setInternalValue(undefined);
+    }
+  };
+
+  const onDidDismiss = async () => {
+    console.log(`DatetimeInput::onDidDismiss::value::${internalValue}`);
+    await helpers.setValue(internalValue);
+    setIsOpen(false);
+  };
+
+  const formatDate = (dateStr: DatetimeValue): string => {
+    if (dateStr) {
+      if (Array.isArray(dateStr)) {
+        // TODO format array of values
+        return 'array';
+      } else {
+        return new Intl.DateTimeFormat(undefined, DEFAULT_FORMAT_DATE).format(new Date(dateStr));
+      }
+    }
+    return '';
+  };
+
+  const getLocalDatetime = (value: DatetimeValue | undefined): DatetimeValue => {
+    if (value) {
+      if (Array.isArray(value)) {
+        // TODO format array value
+        return '';
+      } else {
+        return dayjs(value).format('YYYY-MM-DD[T]HH:mm');
+      }
+    } else {
+      return null;
+    }
+  };
+
+  return (
+    <IonInput
+      name="placeholder"
+      className={classNames(
+        'ls-datetime-input',
+        className,
+        { 'ion-touched': meta.touched },
+        { 'ion-invalid': meta.error },
+        { 'ion-valid': meta.touched && !meta.error },
+      )}
+      data-testid={testid}
+      label={label}
+      labelPlacement={labelPlacement}
+      value={formatDate(field.value)}
+      onFocus={() => setIsOpen(true)}
+      errorText={errorText}
+      readonly
+    >
+      <IonButton
+        aria-hidden="true"
+        fill="clear"
+        onClick={() => setIsOpen(true)}
+        slot="end"
+        data-testid={`${testid}-button-calendar`}
+      >
+        <Icon icon={IconName.Calendar} />
+      </IonButton>
+
+      <IonModal
+        className="ls-datetime-modal"
+        isOpen={isOpen}
+        onIonModalDidDismiss={onDidDismiss}
+        data-testid={`${testid}-modal`}
+      >
+        <IonDatetime
+          onIonChange={onChange}
+          {...datetimeProps}
+          value={getLocalDatetime(internalValue)}
+          data-testid={`${testid}-datetime`}
+        ></IonDatetime>
+      </IonModal>
+    </IonInput>
+  );
+};
+
+export default DatetimeInput;

From bb587e01e78eb971d5750bc8cfdfda6ccf077dd3 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 11 Sep 2024 14:42:13 -0400
Subject: [PATCH 03/18] user form field attrs

---
 src/pages/Users/components/UserForm/UserForm.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/Users/components/UserForm/UserForm.tsx b/src/pages/Users/components/UserForm/UserForm.tsx
index 3e79760..c3ac4a8 100644
--- a/src/pages/Users/components/UserForm/UserForm.tsx
+++ b/src/pages/Users/components/UserForm/UserForm.tsx
@@ -78,7 +78,6 @@ const UserForm = ({
               label="Name"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              required
               ref={focusInput}
               data-testid={`${testid}-field-name`}
             ></Input>
@@ -87,7 +86,6 @@ const UserForm = ({
               label="Username"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              minlength={8}
               maxlength={30}
               data-testid={`${testid}-field-username`}
             ></Input>
@@ -97,7 +95,6 @@ const UserForm = ({
               label="Email"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              required
               data-testid={`${testid}-field-email`}
             ></Input>
             <Input
@@ -105,7 +102,6 @@ const UserForm = ({
               label="Phone"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              required
               data-testid={`${testid}-field-phone`}
             ></Input>
             <Input

From f2adf54c6ace9ad62671742e09b2379bee27e10a Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 11 Sep 2024 14:42:32 -0400
Subject: [PATCH 04/18] calendar icon

---
 src/common/components/Icon/Icon.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/common/components/Icon/Icon.tsx b/src/common/components/Icon/Icon.tsx
index 123b35b..bd2af6f 100644
--- a/src/common/components/Icon/Icon.tsx
+++ b/src/common/components/Icon/Icon.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import {
   faBuilding,
+  faCalendar,
   faCircleInfo,
   faEnvelope,
   faHouse,
@@ -42,6 +43,7 @@ export interface IconProps
  */
 export enum IconName {
   Building = 'building',
+  Calendar = 'calendar',
   CircleInfo = 'circle_info',
   Envelope = 'envelope',
   House = 'house',
@@ -65,6 +67,7 @@ export enum IconName {
  */
 const icons: Record<IconName, IconProp> = {
   building: faBuilding,
+  calendar: faCalendar,
   circle_info: faCircleInfo,
   envelope: faEnvelope,
   house: faHouse,

From 57bd91aedadc21ed6cbf8bcf206482e38eeeeec2 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 12 Sep 2024 06:42:19 -0400
Subject: [PATCH 05/18] datetimeinput internal event logic

---
 src/common/components/Input/DatetimeInput.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index d7361b1..a9c041a 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -2,12 +2,12 @@ import { ComponentPropsWithoutRef, useState } from 'react';
 import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
 import { useField } from 'formik';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
 
 import './DatetimeInput.scss';
 import { PropsWithTestId } from '../types';
 import Input from './Input';
 import Icon, { IconName } from '../Icon/Icon';
-import dayjs from 'dayjs';
 
 const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
   month: 'short',
@@ -36,26 +36,31 @@ const DatetimeInput = ({
 
   const errorText: string | undefined = meta.touched ? meta.error : undefined;
 
-  console.log(`meta::${JSON.stringify(meta)}`);
+  console.log(`DatetimeInput::field::meta::${JSON.stringify(meta)}`);
 
   const onChange = async (e: DatetimeCustomEvent) => {
     console.log(`DatetimeInput::onChange::value::${e.detail.value}`);
-    helpers.setTouched(true);
     const value = e.detail.value;
     if (value) {
       if (Array.isArray(value)) {
         setInternalValue(value.map((val) => dayjs(val).toISOString()));
+        await helpers.setValue(
+          value.map((val) => dayjs(val).toISOString()),
+          true,
+        );
       } else {
         setInternalValue(dayjs(value).toISOString());
+        await helpers.setValue(dayjs(value).toISOString(), true);
       }
     } else {
       setInternalValue(undefined);
+      await helpers.setValue(undefined, true);
     }
   };
 
   const onDidDismiss = async () => {
     console.log(`DatetimeInput::onDidDismiss::value::${internalValue}`);
-    await helpers.setValue(internalValue);
+    await helpers.setTouched(true, true);
     setIsOpen(false);
   };
 

From 35cef42399144fd7a55aebbea4be59a850121efe Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 12 Sep 2024 06:43:30 -0400
Subject: [PATCH 06/18] profile dateOfBirth

---
 src/__fixtures__/profiles.ts                    |  1 +
 src/common/models/profile.ts                    |  1 +
 .../Account/components/Profile/ProfileForm.scss |  3 ++-
 .../Account/components/Profile/ProfileForm.tsx  | 17 +++++++++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/__fixtures__/profiles.ts b/src/__fixtures__/profiles.ts
index 83d347b..f57de99 100644
--- a/src/__fixtures__/profiles.ts
+++ b/src/__fixtures__/profiles.ts
@@ -4,4 +4,5 @@ export const profileFixture1: Profile = {
   name: 'Test User',
   email: 'test1@example.com',
   bio: 'My name is Test User.',
+  dateOfBirth: '2002-07-20T08:32:00-04:00',
 };
diff --git a/src/common/models/profile.ts b/src/common/models/profile.ts
index 11fd134..261484c 100644
--- a/src/common/models/profile.ts
+++ b/src/common/models/profile.ts
@@ -5,4 +5,5 @@ import { User } from './user';
  */
 export type Profile = Pick<User, 'email' | 'name'> & {
   bio?: string;
+  dateOfBirth?: string;
 };
diff --git a/src/pages/Account/components/Profile/ProfileForm.scss b/src/pages/Account/components/Profile/ProfileForm.scss
index 728c291..182f8e7 100644
--- a/src/pages/Account/components/Profile/ProfileForm.scss
+++ b/src/pages/Account/components/Profile/ProfileForm.scss
@@ -1,5 +1,6 @@
 .form-profile {
-  ion-input {
+  ion-input,
+  ion-textarea {
     margin-bottom: 0.5rem;
   }
 }
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index c4de8b4..7f493d0 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -15,6 +15,7 @@ import ErrorCard from 'common/components/Card/ErrorCard';
 import Input from 'common/components/Input/Input';
 import ButtonRow from 'common/components/Button/ButtonRow';
 import Textarea from 'common/components/Input/Textarea';
+import DatetimeInput from 'common/components/Input/DatetimeInput';
 
 /**
  * Profile form values.
@@ -38,6 +39,7 @@ const validationSchema = object<ProfileFormValues>({
   name: string().required('Required. '),
   email: string().required('Required. ').email('Must be an email address. '),
   bio: string().max(500, 'Must be 500 characters or less. '),
+  dateOfBirth: string().required('Required. ').datetime({ allowOffset: true }),
 });
 
 /**
@@ -81,6 +83,7 @@ const ProfileForm = ({
           email: profile.email,
           name: profile.name,
           bio: profile.bio,
+          dateOfBirth: profile.dateOfBirth,
         }}
         onSubmit={(values, { setSubmitting }) => {
           setProgress(true);
@@ -119,6 +122,7 @@ const ProfileForm = ({
               ref={focusInput}
               data-testid={`${testid}-field-name`}
             />
+
             <Input
               name="email"
               type="email"
@@ -128,6 +132,7 @@ const ProfileForm = ({
               autocomplete="off"
               data-testid={`${testid}-field-email`}
             />
+
             <Textarea
               name="bio"
               label="Bio"
@@ -139,6 +144,18 @@ const ProfileForm = ({
               data-testid={`${testid}-field-bio`}
             />
 
+            <DatetimeInput
+              name="dateOfBirth"
+              label="Birthday"
+              labelPlacement="stacked"
+              disabled={isSubmitting}
+              presentation="date-time"
+              showClearButton
+              showDefaultButtons
+              showDefaultTitle
+              testid={`${testid}-field-dateofbirth`}
+            />
+
             <ButtonRow className="ion-margin-top" expand="block">
               <IonButton
                 type="button"

From 4fbeb1a005373174683471ca8804595883128268 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 12 Sep 2024 07:01:29 -0400
Subject: [PATCH 07/18] datetime time format

---
 src/common/components/Input/DatetimeInput.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index a9c041a..d0df2ef 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -15,6 +15,11 @@ const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
   year: 'numeric',
 };
 
+const DEFAULT_FORMAT_TIME: Intl.DateTimeFormatOptions = {
+  hour: 'numeric',
+  minute: '2-digit',
+};
+
 type DatetimeValue = string | string[] | null;
 
 interface DatetimeInputProps
@@ -76,6 +81,18 @@ const DatetimeInput = ({
     return '';
   };
 
+  const formatTime = (dateStr: DatetimeValue): string => {
+    if (dateStr) {
+      if (Array.isArray(dateStr)) {
+        // TODO format array of values
+        return 'array';
+      } else {
+        return new Intl.DateTimeFormat(undefined, DEFAULT_FORMAT_TIME).format(new Date(dateStr));
+      }
+    }
+    return '';
+  };
+
   const getLocalDatetime = (value: DatetimeValue | undefined): DatetimeValue => {
     if (value) {
       if (Array.isArray(value)) {
@@ -102,7 +119,7 @@ const DatetimeInput = ({
       data-testid={testid}
       label={label}
       labelPlacement={labelPlacement}
-      value={formatDate(field.value)}
+      value={`${formatDate(field.value)} ${formatTime(field.value)}`}
       onFocus={() => setIsOpen(true)}
       errorText={errorText}
       readonly

From 3d290b03a5bbe8036384e318956d23ae4687545d Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 12 Sep 2024 15:53:10 -0400
Subject: [PATCH 08/18] date format

---
 src/common/components/Input/DatetimeInput.tsx | 82 ++++++++++++-------
 .../components/Profile/ProfileForm.scss       |  4 +
 .../components/Profile/ProfileForm.tsx        |  4 +-
 3 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index d0df2ef..db083c4 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, useState } from 'react';
+import { ComponentPropsWithoutRef, useMemo, useState } from 'react';
 import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
 import { useField } from 'formik';
 import classNames from 'classnames';
@@ -69,35 +69,10 @@ const DatetimeInput = ({
     setIsOpen(false);
   };
 
-  const formatDate = (dateStr: DatetimeValue): string => {
-    if (dateStr) {
-      if (Array.isArray(dateStr)) {
-        // TODO format array of values
-        return 'array';
-      } else {
-        return new Intl.DateTimeFormat(undefined, DEFAULT_FORMAT_DATE).format(new Date(dateStr));
-      }
-    }
-    return '';
-  };
-
-  const formatTime = (dateStr: DatetimeValue): string => {
-    if (dateStr) {
-      if (Array.isArray(dateStr)) {
-        // TODO format array of values
-        return 'array';
-      } else {
-        return new Intl.DateTimeFormat(undefined, DEFAULT_FORMAT_TIME).format(new Date(dateStr));
-      }
-    }
-    return '';
-  };
-
   const getLocalDatetime = (value: DatetimeValue | undefined): DatetimeValue => {
     if (value) {
       if (Array.isArray(value)) {
-        // TODO format array value
-        return '';
+        return value.map((val) => dayjs(val).format('YYYY-MM-DD[T]HH:mm'));
       } else {
         return dayjs(value).format('YYYY-MM-DD[T]HH:mm');
       }
@@ -106,6 +81,57 @@ const DatetimeInput = ({
     }
   };
 
+  const formattedValue = useMemo(() => {
+    if (field.value) {
+      const dateOptions: Intl.DateTimeFormatOptions =
+        datetimeProps.formatOptions?.date ?? DEFAULT_FORMAT_DATE;
+      const timeOptions: Intl.DateTimeFormatOptions =
+        datetimeProps.formatOptions?.time ?? DEFAULT_FORMAT_TIME;
+
+      switch (datetimeProps.presentation) {
+        case 'date': {
+          return `${new Intl.DateTimeFormat(undefined, dateOptions).format(new Date(field.value))}`;
+        }
+        case 'month': {
+          const options: Intl.DateTimeFormatOptions = {
+            month: datetimeProps.formatOptions?.date?.month ?? 'long',
+          };
+          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
+        }
+        case 'month-year': {
+          const options: Intl.DateTimeFormatOptions = {
+            month: datetimeProps.formatOptions?.date?.month ?? 'long',
+            year: datetimeProps.formatOptions?.date?.year ?? 'numeric',
+          };
+          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
+        }
+        case 'time': {
+          return `${new Intl.DateTimeFormat(undefined, timeOptions).format(new Date(field.value))}`;
+        }
+        case 'time-date': {
+          return `${new Intl.DateTimeFormat(undefined, timeOptions).format(
+            new Date(field.value),
+          )} ${new Intl.DateTimeFormat(undefined, dateOptions).format(new Date(field.value))}`;
+        }
+        case 'year': {
+          const options: Intl.DateTimeFormatOptions = {
+            year: datetimeProps.formatOptions?.date?.year ?? 'numeric',
+          };
+          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
+        }
+        case 'date-time':
+        default: {
+          return `${new Intl.DateTimeFormat(undefined, dateOptions).format(
+            new Date(field.value),
+          )} ${new Intl.DateTimeFormat(undefined, timeOptions).format(new Date(field.value))}`;
+        }
+      }
+    } else {
+      return '';
+    }
+  }, [datetimeProps.presentation, datetimeProps.formatOptions, field.value]);
+  console.log(`formattedValue::${formattedValue}`);
+
   return (
     <IonInput
       name="placeholder"
@@ -119,7 +145,7 @@ const DatetimeInput = ({
       data-testid={testid}
       label={label}
       labelPlacement={labelPlacement}
-      value={`${formatDate(field.value)} ${formatTime(field.value)}`}
+      value={formattedValue}
       onFocus={() => setIsOpen(true)}
       errorText={errorText}
       readonly
diff --git a/src/pages/Account/components/Profile/ProfileForm.scss b/src/pages/Account/components/Profile/ProfileForm.scss
index 182f8e7..6a491cd 100644
--- a/src/pages/Account/components/Profile/ProfileForm.scss
+++ b/src/pages/Account/components/Profile/ProfileForm.scss
@@ -3,4 +3,8 @@
   ion-textarea {
     margin-bottom: 0.5rem;
   }
+
+  .button-row {
+    margin-top: 2rem;
+  }
 }
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index 7f493d0..9eb784f 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -149,14 +149,14 @@ const ProfileForm = ({
               label="Birthday"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              presentation="date-time"
+              presentation="date"
               showClearButton
               showDefaultButtons
               showDefaultTitle
               testid={`${testid}-field-dateofbirth`}
             />
 
-            <ButtonRow className="ion-margin-top" expand="block">
+            <ButtonRow expand="block">
               <IonButton
                 type="button"
                 color="secondary"

From 254d3ecd6112c1b344a4815f537d01fb83aaf1c0 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 13 Sep 2024 06:44:51 -0400
Subject: [PATCH 09/18] datetime disabled

---
 src/common/components/Input/DatetimeInput.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index db083c4..4f4a0d8 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -143,6 +143,7 @@ const DatetimeInput = ({
         { 'ion-valid': meta.touched && !meta.error },
       )}
       data-testid={testid}
+      disabled={datetimeProps.disabled}
       label={label}
       labelPlacement={labelPlacement}
       value={formattedValue}
@@ -155,6 +156,7 @@ const DatetimeInput = ({
         fill="clear"
         onClick={() => setIsOpen(true)}
         slot="end"
+        disabled={datetimeProps.disabled}
         data-testid={`${testid}-button-calendar`}
       >
         <Icon icon={IconName.Calendar} />

From 23638f514cd5ad99ac31b2151378d29b07542979 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 13 Sep 2024 08:10:42 -0400
Subject: [PATCH 10/18] clean up

---
 src/common/components/Input/DatetimeInput.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index 4f4a0d8..d723e11 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -134,7 +134,6 @@ const DatetimeInput = ({
 
   return (
     <IonInput
-      name="placeholder"
       className={classNames(
         'ls-datetime-input',
         className,
@@ -144,35 +143,35 @@ const DatetimeInput = ({
       )}
       data-testid={testid}
       disabled={datetimeProps.disabled}
+      errorText={errorText}
       label={label}
       labelPlacement={labelPlacement}
-      value={formattedValue}
       onFocus={() => setIsOpen(true)}
-      errorText={errorText}
       readonly
+      value={formattedValue}
     >
       <IonButton
         aria-hidden="true"
+        data-testid={`${testid}-button-calendar`}
+        disabled={datetimeProps.disabled}
         fill="clear"
         onClick={() => setIsOpen(true)}
         slot="end"
-        disabled={datetimeProps.disabled}
-        data-testid={`${testid}-button-calendar`}
       >
         <Icon icon={IconName.Calendar} />
       </IonButton>
 
       <IonModal
         className="ls-datetime-modal"
+        data-testid={`${testid}-modal`}
         isOpen={isOpen}
         onIonModalDidDismiss={onDidDismiss}
-        data-testid={`${testid}-modal`}
       >
         <IonDatetime
-          onIonChange={onChange}
           {...datetimeProps}
-          value={getLocalDatetime(internalValue)}
           data-testid={`${testid}-datetime`}
+          onIonChange={onChange}
+          value={getLocalDatetime(internalValue)}
         ></IonDatetime>
       </IonModal>
     </IonInput>

From 5df227e8f8d6f6960d5c4f945d46ccd3dbadaad9 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 16 Sep 2024 06:34:53 -0400
Subject: [PATCH 11/18] format datetime

---
 src/common/components/Input/DatetimeInput.tsx | 42 +++++++++++++++----
 .../components/Profile/ProfileForm.tsx        | 10 +++--
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index d723e11..bb658ff 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -9,27 +9,51 @@ import { PropsWithTestId } from '../types';
 import Input from './Input';
 import Icon, { IconName } from '../Icon/Icon';
 
+/**
+ * Default `IonDatetime` `formatOptions` for the date. May be overridden by
+ * supplying a `formatOptions` property.
+ * @see {@link IonDatetime}
+ */
 const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
   month: 'short',
   day: 'numeric',
   year: 'numeric',
 };
 
+/**
+ * Default `IonDatetime` `formatOptions` for the time. May be overridden by
+ * supplying a `formatOptions` property.
+ * @see {@link IonDatetime}
+ */
 const DEFAULT_FORMAT_TIME: Intl.DateTimeFormatOptions = {
   hour: 'numeric',
   minute: '2-digit',
 };
 
-type DatetimeValue = string | string[] | null;
-
+/**
+ * `DatetimeValue` represents the possible raw values from `IonDatetime`.
+ */
+export type DatetimeValue = string | string[] | null;
+
+/**
+ * Properties for the `DatetimeInput` component.
+ * @param {function} formatValue - Optional. A function which accepts the raw
+ * `IonDatetime` value and formats it for the Formik field value.
+ * @see {@link PropsWithTestId}
+ * @see {@link IonDatetime}
+ * @see {@link IonInput}
+ */
 interface DatetimeInputProps
   extends PropsWithTestId,
     Pick<ComponentPropsWithoutRef<typeof Input>, 'label' | 'labelPlacement'>,
     Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>,
-    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
+    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {
+  formatValue?: (value?: string | null) => string;
+}
 
 const DatetimeInput = ({
   className,
+  formatValue,
   label,
   labelPlacement,
   testid = 'input-datetime',
@@ -43,19 +67,23 @@ const DatetimeInput = ({
 
   console.log(`DatetimeInput::field::meta::${JSON.stringify(meta)}`);
 
+  const formatDatetime = (value?: string | null): string => {
+    return formatValue ? formatValue(value) : dayjs(value).toISOString();
+  };
+
   const onChange = async (e: DatetimeCustomEvent) => {
     console.log(`DatetimeInput::onChange::value::${e.detail.value}`);
     const value = e.detail.value;
     if (value) {
       if (Array.isArray(value)) {
-        setInternalValue(value.map((val) => dayjs(val).toISOString()));
+        setInternalValue(value.map((val) => formatDatetime(val)));
         await helpers.setValue(
-          value.map((val) => dayjs(val).toISOString()),
+          value.map((val) => formatDatetime(val)),
           true,
         );
       } else {
-        setInternalValue(dayjs(value).toISOString());
-        await helpers.setValue(dayjs(value).toISOString(), true);
+        setInternalValue(formatDatetime(value));
+        await helpers.setValue(formatDatetime(value), true);
       }
     } else {
       setInternalValue(undefined);
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index 9eb784f..4683699 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -1,8 +1,9 @@
 import { IonButton, useIonRouter, useIonViewDidEnter } from '@ionic/react';
 import { useRef, useState } from 'react';
 import { Form, Formik } from 'formik';
-import { object, string } from 'yup';
+import { date, object, string } from 'yup';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
 
 import './ProfileForm.scss';
 import { BaseComponentProps } from 'common/components/types';
@@ -39,7 +40,7 @@ const validationSchema = object<ProfileFormValues>({
   name: string().required('Required. '),
   email: string().required('Required. ').email('Must be an email address. '),
   bio: string().max(500, 'Must be 500 characters or less. '),
-  dateOfBirth: string().required('Required. ').datetime({ allowOffset: true }),
+  dateOfBirth: date().required('Required. '),
 });
 
 /**
@@ -111,7 +112,7 @@ const ProfileForm = ({
         }}
         validationSchema={validationSchema}
       >
-        {({ dirty, isSubmitting }) => (
+        {({ dirty, isValid, isSubmitting }) => (
           <Form>
             <Input
               name="name"
@@ -149,6 +150,7 @@ const ProfileForm = ({
               label="Birthday"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              formatValue={(val) => dayjs(val).format('YYYY-MM-DD')}
               presentation="date"
               showClearButton
               showDefaultButtons
@@ -170,7 +172,7 @@ const ProfileForm = ({
               <IonButton
                 type="submit"
                 color="primary"
-                disabled={isSubmitting || !dirty}
+                disabled={isSubmitting || !dirty || !isValid}
                 data-testid={`${testid}-button-submit`}
               >
                 Save

From c73c5147e83c58bf2f9113c124dde6152c935d21 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 16 Sep 2024 08:48:54 -0400
Subject: [PATCH 12/18] DateInput component

---
 src/common/components/Input/DateInput.scss    |  12 ++
 src/common/components/Input/DateInput.tsx     | 149 ++++++++++++++++++
 .../components/Profile/ProfileForm.tsx        |  11 +-
 3 files changed, 165 insertions(+), 7 deletions(-)
 create mode 100644 src/common/components/Input/DateInput.scss
 create mode 100644 src/common/components/Input/DateInput.tsx

diff --git a/src/common/components/Input/DateInput.scss b/src/common/components/Input/DateInput.scss
new file mode 100644
index 0000000..87cebee
--- /dev/null
+++ b/src/common/components/Input/DateInput.scss
@@ -0,0 +1,12 @@
+ion-input.ls-date-input {
+  input {
+    cursor: pointer;
+  }
+}
+
+ion-modal.ls-date-modal {
+  --height: fit-content;
+  --width: fit-content;
+
+  --border-radius: 0.5rem;
+}
diff --git a/src/common/components/Input/DateInput.tsx b/src/common/components/Input/DateInput.tsx
new file mode 100644
index 0000000..7dee30f
--- /dev/null
+++ b/src/common/components/Input/DateInput.tsx
@@ -0,0 +1,149 @@
+import { ComponentPropsWithoutRef, useMemo, useState } from 'react';
+import { ModalCustomEvent } from '@ionic/core';
+import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
+import { useField } from 'formik';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+
+import './DateInput.scss';
+import { PropsWithTestId } from '../types';
+import Icon, { IconName } from '../Icon/Icon';
+
+/**
+ * Default `IonDatetime` `formatOptions` for the date. May be overridden by
+ * supplying a `formatOptions` property. Controls how the date is displayed
+ * in the form input.
+ * @see {@link IonDatetime}
+ */
+const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+};
+
+/**
+ * `DateValue` describes the possible types of an `IonDatetime` whose `presentation`
+ * is 'date'.
+ */
+export type DateValue = string | null;
+
+/**
+ * Properties for the `DateInput` component.
+ * @see {@link PropsWithTestId}
+ * @see {@link IonDatetime}
+ * @see {@link IonInput}
+ * @see {@link IonModal}
+ */
+interface DateInputProps
+  extends PropsWithTestId,
+    Pick<ComponentPropsWithoutRef<typeof IonInput>, 'label' | 'labelPlacement'>,
+    Pick<ComponentPropsWithoutRef<typeof IonModal>, 'onIonModalDidDismiss'>,
+    Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'multiple' | 'name' | 'presentation'>,
+    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
+
+const DateInput = ({
+  className,
+  label,
+  labelPlacement,
+  onIonModalDidDismiss,
+  testid = 'input-date',
+  ...datetimeProps
+}: DateInputProps): JSX.Element => {
+  const [field, meta, helpers] = useField(datetimeProps.name);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [internalValue, setInternalValue] = useState<DateValue | undefined>(field.value);
+
+  // populate error text only if the field has been touched and has an error
+  const errorText: string | undefined = meta.touched ? meta.error : undefined;
+
+  /**
+   * Handle change events emitted by `IonDatetime`.
+   * @param {DatetimeCustomEvent} e - The event.
+   */
+  const onChange = async (e: DatetimeCustomEvent): Promise<void> => {
+    const value = e.detail.value as DateValue;
+    if (value) {
+      const isoDate = dayjs(value).format('YYYY-MM-DD');
+      setInternalValue(isoDate);
+      await helpers.setValue(isoDate, true);
+    } else {
+      setInternalValue(undefined);
+      await helpers.setValue(undefined, true);
+    }
+    datetimeProps.onIonChange?.(e);
+  };
+
+  /**
+   * Handle 'did dismiss' events emitted by `IonModal`.
+   */
+  const onDidDismiss = async (e: ModalCustomEvent): Promise<void> => {
+    await helpers.setTouched(true, true);
+    setIsOpen(false);
+    onIonModalDidDismiss?.(e);
+  };
+
+  // format the value to display in the IonInput
+  const formattedValue = useMemo(() => {
+    if (field.value) {
+      const dateOptions: Intl.DateTimeFormatOptions = {
+        ...(datetimeProps.formatOptions?.date ?? DEFAULT_FORMAT_DATE),
+        timeZone: 'UTC',
+      };
+
+      return Intl.DateTimeFormat(undefined, dateOptions).format(new Date(field.value));
+    } else {
+      return '';
+    }
+  }, [datetimeProps.formatOptions, field.value]);
+
+  return (
+    <>
+      <IonInput
+        className={classNames(
+          'ls-date-input',
+          className,
+          { 'ion-touched': meta.touched },
+          { 'ion-invalid': meta.error },
+          { 'ion-valid': meta.touched && !meta.error },
+        )}
+        data-testid={testid}
+        disabled={datetimeProps.disabled}
+        errorText={errorText}
+        label={label}
+        labelPlacement={labelPlacement}
+        onFocus={() => setIsOpen(true)}
+        readonly
+        value={formattedValue}
+      >
+        <IonButton
+          aria-hidden="true"
+          data-testid={`${testid}-button-calendar`}
+          disabled={datetimeProps.disabled}
+          fill="clear"
+          onClick={() => setIsOpen(true)}
+          slot="end"
+        >
+          <Icon icon={IconName.Calendar} />
+        </IonButton>
+      </IonInput>
+
+      <IonModal
+        className="ls-date-modal"
+        data-testid={`${testid}-modal`}
+        isOpen={isOpen}
+        onIonModalDidDismiss={onDidDismiss}
+      >
+        <IonDatetime
+          {...datetimeProps}
+          data-testid={`${testid}-datetime`}
+          multiple={false}
+          onIonChange={onChange}
+          presentation="date"
+          value={internalValue}
+        ></IonDatetime>
+      </IonModal>
+    </>
+  );
+};
+
+export default DateInput;
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index 4683699..750608e 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -3,7 +3,6 @@ import { useRef, useState } from 'react';
 import { Form, Formik } from 'formik';
 import { date, object, string } from 'yup';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
 
 import './ProfileForm.scss';
 import { BaseComponentProps } from 'common/components/types';
@@ -16,7 +15,7 @@ import ErrorCard from 'common/components/Card/ErrorCard';
 import Input from 'common/components/Input/Input';
 import ButtonRow from 'common/components/Button/ButtonRow';
 import Textarea from 'common/components/Input/Textarea';
-import DatetimeInput from 'common/components/Input/DatetimeInput';
+import DateInput from 'common/components/Input/DateInput';
 
 /**
  * Profile form values.
@@ -112,7 +111,7 @@ const ProfileForm = ({
         }}
         validationSchema={validationSchema}
       >
-        {({ dirty, isValid, isSubmitting }) => (
+        {({ dirty, isSubmitting }) => (
           <Form>
             <Input
               name="name"
@@ -145,13 +144,11 @@ const ProfileForm = ({
               data-testid={`${testid}-field-bio`}
             />
 
-            <DatetimeInput
+            <DateInput
               name="dateOfBirth"
               label="Birthday"
               labelPlacement="stacked"
               disabled={isSubmitting}
-              formatValue={(val) => dayjs(val).format('YYYY-MM-DD')}
-              presentation="date"
               showClearButton
               showDefaultButtons
               showDefaultTitle
@@ -172,7 +169,7 @@ const ProfileForm = ({
               <IonButton
                 type="submit"
                 color="primary"
-                disabled={isSubmitting || !dirty || !isValid}
+                disabled={isSubmitting || !dirty}
                 data-testid={`${testid}-button-submit`}
               >
                 Save

From 4dff2e19142e2e2a0894c55e406fb9cea26e4af1 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 16 Sep 2024 13:29:30 -0400
Subject: [PATCH 13/18] tests

---
 .../Input/__tests__/DateInput.test.tsx        | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/common/components/Input/__tests__/DateInput.test.tsx

diff --git a/src/common/components/Input/__tests__/DateInput.test.tsx b/src/common/components/Input/__tests__/DateInput.test.tsx
new file mode 100644
index 0000000..81e79ca
--- /dev/null
+++ b/src/common/components/Input/__tests__/DateInput.test.tsx
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { Form, Formik } from 'formik';
+
+import { render, screen } from 'test/test-utils';
+
+import DateInput from '../DateInput';
+
+describe('DateInput', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(
+      <Formik initialValues={{ testField: '' }} onSubmit={() => {}}>
+        <Form>
+          <DateInput name="testField" testid="input" />
+        </Form>
+      </Formik>,
+    );
+    await screen.findByTestId('input');
+
+    // ASSERT
+    expect(screen.getByTestId('input')).toBeDefined();
+  });
+});

From 3e973a01d3d9b2eee76856eb4ba9d49e6ed91b03 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 17 Sep 2024 06:30:46 -0400
Subject: [PATCH 14/18] DatetimeInput refactored

---
 src/common/components/Input/DatetimeInput.tsx | 190 +++++++-----------
 1 file changed, 77 insertions(+), 113 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index bb658ff..a94ba04 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, useMemo, useState } from 'react';
+import { ModalCustomEvent } from '@ionic/core';
 import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
 import { useField } from 'formik';
 import classNames from 'classnames';
@@ -6,12 +7,12 @@ import dayjs from 'dayjs';
 
 import './DatetimeInput.scss';
 import { PropsWithTestId } from '../types';
-import Input from './Input';
 import Icon, { IconName } from '../Icon/Icon';
 
 /**
  * Default `IonDatetime` `formatOptions` for the date. May be overridden by
- * supplying a `formatOptions` property.
+ * supplying a `formatOptions` property. Controls how the date is displayed
+ * in the form input.
  * @see {@link IonDatetime}
  */
 const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
@@ -22,7 +23,8 @@ const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
 
 /**
  * Default `IonDatetime` `formatOptions` for the time. May be overridden by
- * supplying a `formatOptions` property.
+ * supplying a `formatOptions` property. Controls how the time is displayed
+ * in the form input.
  * @see {@link IonDatetime}
  */
 const DEFAULT_FORMAT_TIME: Intl.DateTimeFormatOptions = {
@@ -31,31 +33,30 @@ const DEFAULT_FORMAT_TIME: Intl.DateTimeFormatOptions = {
 };
 
 /**
- * `DatetimeValue` represents the possible raw values from `IonDatetime`.
+ * `DatetimeValue` describes the possible types of an `IonDatetime` whose `presentation`
+ * is 'date-time'.
  */
-export type DatetimeValue = string | string[] | null;
+export type DatetimeValue = string | null;
 
 /**
  * Properties for the `DatetimeInput` component.
- * @param {function} formatValue - Optional. A function which accepts the raw
- * `IonDatetime` value and formats it for the Formik field value.
  * @see {@link PropsWithTestId}
  * @see {@link IonDatetime}
  * @see {@link IonInput}
+ * @see {@link IonModal}
  */
 interface DatetimeInputProps
   extends PropsWithTestId,
-    Pick<ComponentPropsWithoutRef<typeof Input>, 'label' | 'labelPlacement'>,
-    Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>,
-    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {
-  formatValue?: (value?: string | null) => string;
-}
+    Pick<ComponentPropsWithoutRef<typeof IonInput>, 'label' | 'labelPlacement'>,
+    Pick<ComponentPropsWithoutRef<typeof IonModal>, 'onIonModalDidDismiss'>,
+    Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'multiple' | 'name' | 'presentation'>,
+    Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
 
 const DatetimeInput = ({
   className,
-  formatValue,
   label,
   labelPlacement,
+  onIonModalDidDismiss,
   testid = 'input-datetime',
   ...datetimeProps
 }: DatetimeInputProps): JSX.Element => {
@@ -63,131 +64,92 @@ const DatetimeInput = ({
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [internalValue, setInternalValue] = useState<DatetimeValue | undefined>(field.value);
 
+  // populate error text only if the field has been touched and has an error
   const errorText: string | undefined = meta.touched ? meta.error : undefined;
 
-  console.log(`DatetimeInput::field::meta::${JSON.stringify(meta)}`);
-
-  const formatDatetime = (value?: string | null): string => {
-    return formatValue ? formatValue(value) : dayjs(value).toISOString();
-  };
-
-  const onChange = async (e: DatetimeCustomEvent) => {
-    console.log(`DatetimeInput::onChange::value::${e.detail.value}`);
-    const value = e.detail.value;
+  /**
+   * Handle change events emitted by `IonDatetime`.
+   * @param {DatetimeCustomEvent} e - The event.
+   */
+  const onChange = async (e: DatetimeCustomEvent): Promise<void> => {
+    const value = e.detail.value as DatetimeValue;
     if (value) {
-      if (Array.isArray(value)) {
-        setInternalValue(value.map((val) => formatDatetime(val)));
-        await helpers.setValue(
-          value.map((val) => formatDatetime(val)),
-          true,
-        );
-      } else {
-        setInternalValue(formatDatetime(value));
-        await helpers.setValue(formatDatetime(value), true);
-      }
+      const isoDate = dayjs(value).toISOString();
+      setInternalValue(isoDate);
+      await helpers.setValue(isoDate, true);
     } else {
       setInternalValue(undefined);
       await helpers.setValue(undefined, true);
     }
+    datetimeProps.onIonChange?.(e);
   };
 
-  const onDidDismiss = async () => {
-    console.log(`DatetimeInput::onDidDismiss::value::${internalValue}`);
+  /**
+   * Handle 'did dismiss' events emitted by `IonModal`.
+   */
+  const onDidDismiss = async (e: ModalCustomEvent): Promise<void> => {
     await helpers.setTouched(true, true);
     setIsOpen(false);
+    onIonModalDidDismiss?.(e);
   };
 
-  const getLocalDatetime = (value: DatetimeValue | undefined): DatetimeValue => {
+  const toLocalDate = (value?: DatetimeValue): string | undefined => {
     if (value) {
-      if (Array.isArray(value)) {
-        return value.map((val) => dayjs(val).format('YYYY-MM-DD[T]HH:mm'));
-      } else {
-        return dayjs(value).format('YYYY-MM-DD[T]HH:mm');
-      }
+      const localDate = dayjs(value).format('YYYY-MM-DD[T]HH:mm');
+      return localDate;
     } else {
-      return null;
+      return undefined;
     }
   };
 
+  // format the value to display in the IonInput
   const formattedValue = useMemo(() => {
     if (field.value) {
-      const dateOptions: Intl.DateTimeFormatOptions =
-        datetimeProps.formatOptions?.date ?? DEFAULT_FORMAT_DATE;
-      const timeOptions: Intl.DateTimeFormatOptions =
-        datetimeProps.formatOptions?.time ?? DEFAULT_FORMAT_TIME;
-
-      switch (datetimeProps.presentation) {
-        case 'date': {
-          return `${new Intl.DateTimeFormat(undefined, dateOptions).format(new Date(field.value))}`;
-        }
-        case 'month': {
-          const options: Intl.DateTimeFormatOptions = {
-            month: datetimeProps.formatOptions?.date?.month ?? 'long',
-          };
-          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
-        }
-        case 'month-year': {
-          const options: Intl.DateTimeFormatOptions = {
-            month: datetimeProps.formatOptions?.date?.month ?? 'long',
-            year: datetimeProps.formatOptions?.date?.year ?? 'numeric',
-          };
-          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
-        }
-        case 'time': {
-          return `${new Intl.DateTimeFormat(undefined, timeOptions).format(new Date(field.value))}`;
-        }
-        case 'time-date': {
-          return `${new Intl.DateTimeFormat(undefined, timeOptions).format(
-            new Date(field.value),
-          )} ${new Intl.DateTimeFormat(undefined, dateOptions).format(new Date(field.value))}`;
-        }
-        case 'year': {
-          const options: Intl.DateTimeFormatOptions = {
-            year: datetimeProps.formatOptions?.date?.year ?? 'numeric',
-          };
-          return `${new Intl.DateTimeFormat(undefined, options).format(new Date(field.value))}`;
-        }
-        case 'date-time':
-        default: {
-          return `${new Intl.DateTimeFormat(undefined, dateOptions).format(
-            new Date(field.value),
-          )} ${new Intl.DateTimeFormat(undefined, timeOptions).format(new Date(field.value))}`;
-        }
-      }
+      const date = new Intl.DateTimeFormat(
+        undefined,
+        datetimeProps.formatOptions?.date ?? DEFAULT_FORMAT_DATE,
+      ).format(new Date(field.value));
+      const time = new Intl.DateTimeFormat(
+        undefined,
+        datetimeProps.formatOptions?.time ?? DEFAULT_FORMAT_TIME,
+      ).format(new Date(field.value));
+
+      return `${date} ${time}`;
     } else {
       return '';
     }
-  }, [datetimeProps.presentation, datetimeProps.formatOptions, field.value]);
-  console.log(`formattedValue::${formattedValue}`);
+  }, [datetimeProps.formatOptions, field.value]);
 
   return (
-    <IonInput
-      className={classNames(
-        'ls-datetime-input',
-        className,
-        { 'ion-touched': meta.touched },
-        { 'ion-invalid': meta.error },
-        { 'ion-valid': meta.touched && !meta.error },
-      )}
-      data-testid={testid}
-      disabled={datetimeProps.disabled}
-      errorText={errorText}
-      label={label}
-      labelPlacement={labelPlacement}
-      onFocus={() => setIsOpen(true)}
-      readonly
-      value={formattedValue}
-    >
-      <IonButton
-        aria-hidden="true"
-        data-testid={`${testid}-button-calendar`}
+    <>
+      <IonInput
+        className={classNames(
+          'ls-datetime-input',
+          className,
+          { 'ion-touched': meta.touched },
+          { 'ion-invalid': meta.error },
+          { 'ion-valid': meta.touched && !meta.error },
+        )}
+        data-testid={testid}
         disabled={datetimeProps.disabled}
-        fill="clear"
-        onClick={() => setIsOpen(true)}
-        slot="end"
+        errorText={errorText}
+        label={label}
+        labelPlacement={labelPlacement}
+        onFocus={() => setIsOpen(true)}
+        readonly
+        value={formattedValue}
       >
-        <Icon icon={IconName.Calendar} />
-      </IonButton>
+        <IonButton
+          aria-hidden="true"
+          data-testid={`${testid}-button-calendar`}
+          disabled={datetimeProps.disabled}
+          fill="clear"
+          onClick={() => setIsOpen(true)}
+          slot="end"
+        >
+          <Icon icon={IconName.Calendar} />
+        </IonButton>
+      </IonInput>
 
       <IonModal
         className="ls-datetime-modal"
@@ -198,11 +160,13 @@ const DatetimeInput = ({
         <IonDatetime
           {...datetimeProps}
           data-testid={`${testid}-datetime`}
+          multiple={false}
           onIonChange={onChange}
-          value={getLocalDatetime(internalValue)}
+          presentation="date-time"
+          value={toLocalDate(internalValue)}
         ></IonDatetime>
       </IonModal>
-    </IonInput>
+    </>
   );
 };
 

From 6aa403194d52ca8f9209740fac38f49f0eeb9d07 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 17 Sep 2024 10:02:52 -0400
Subject: [PATCH 15/18] format IonDatetime value

---
 src/common/components/Input/DateInput.tsx     | 17 ++++++++-------
 src/common/components/Input/DatetimeInput.tsx | 21 +++++++------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/common/components/Input/DateInput.tsx b/src/common/components/Input/DateInput.tsx
index 7dee30f..8eb9307 100644
--- a/src/common/components/Input/DateInput.tsx
+++ b/src/common/components/Input/DateInput.tsx
@@ -51,7 +51,6 @@ const DateInput = ({
 }: DateInputProps): JSX.Element => {
   const [field, meta, helpers] = useField(datetimeProps.name);
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [internalValue, setInternalValue] = useState<DateValue | undefined>(field.value);
 
   // populate error text only if the field has been touched and has an error
   const errorText: string | undefined = meta.touched ? meta.error : undefined;
@@ -64,11 +63,9 @@ const DateInput = ({
     const value = e.detail.value as DateValue;
     if (value) {
       const isoDate = dayjs(value).format('YYYY-MM-DD');
-      setInternalValue(isoDate);
       await helpers.setValue(isoDate, true);
     } else {
-      setInternalValue(undefined);
-      await helpers.setValue(undefined, true);
+      await helpers.setValue(null, true);
     }
     datetimeProps.onIonChange?.(e);
   };
@@ -83,7 +80,8 @@ const DateInput = ({
   };
 
   // format the value to display in the IonInput
-  const formattedValue = useMemo(() => {
+  // use UTC so that local timezone offset does not change the date
+  const inputValue = useMemo(() => {
     if (field.value) {
       const dateOptions: Intl.DateTimeFormatOptions = {
         ...(datetimeProps.formatOptions?.date ?? DEFAULT_FORMAT_DATE),
@@ -96,6 +94,11 @@ const DateInput = ({
     }
   }, [datetimeProps.formatOptions, field.value]);
 
+  // format the value for the IonDatetime. it must be a local ISO date or null/undefined
+  const datetimeValue = useMemo(() => {
+    return field.value ? dayjs(field.value).format('YYYY-MM-DD[T]HH:mm') : null;
+  }, [field.value]);
+
   return (
     <>
       <IonInput
@@ -113,7 +116,7 @@ const DateInput = ({
         labelPlacement={labelPlacement}
         onFocus={() => setIsOpen(true)}
         readonly
-        value={formattedValue}
+        value={inputValue}
       >
         <IonButton
           aria-hidden="true"
@@ -139,7 +142,7 @@ const DateInput = ({
           multiple={false}
           onIonChange={onChange}
           presentation="date"
-          value={internalValue}
+          value={datetimeValue}
         ></IonDatetime>
       </IonModal>
     </>
diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index a94ba04..0451bda 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -62,7 +62,6 @@ const DatetimeInput = ({
 }: DatetimeInputProps): JSX.Element => {
   const [field, meta, helpers] = useField(datetimeProps.name);
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [internalValue, setInternalValue] = useState<DatetimeValue | undefined>(field.value);
 
   // populate error text only if the field has been touched and has an error
   const errorText: string | undefined = meta.touched ? meta.error : undefined;
@@ -75,11 +74,9 @@ const DatetimeInput = ({
     const value = e.detail.value as DatetimeValue;
     if (value) {
       const isoDate = dayjs(value).toISOString();
-      setInternalValue(isoDate);
       await helpers.setValue(isoDate, true);
     } else {
-      setInternalValue(undefined);
-      await helpers.setValue(undefined, true);
+      await helpers.setValue(null, true);
     }
     datetimeProps.onIonChange?.(e);
   };
@@ -93,15 +90,6 @@ const DatetimeInput = ({
     onIonModalDidDismiss?.(e);
   };
 
-  const toLocalDate = (value?: DatetimeValue): string | undefined => {
-    if (value) {
-      const localDate = dayjs(value).format('YYYY-MM-DD[T]HH:mm');
-      return localDate;
-    } else {
-      return undefined;
-    }
-  };
-
   // format the value to display in the IonInput
   const formattedValue = useMemo(() => {
     if (field.value) {
@@ -120,6 +108,11 @@ const DatetimeInput = ({
     }
   }, [datetimeProps.formatOptions, field.value]);
 
+  // format the value for the IonDatetime. it must be a local ISO date or null/undefined
+  const datetimeValue = useMemo(() => {
+    return field.value ? dayjs(field.value).format('YYYY-MM-DD[T]HH:mm') : null;
+  }, [field.value]);
+
   return (
     <>
       <IonInput
@@ -163,7 +156,7 @@ const DatetimeInput = ({
           multiple={false}
           onIonChange={onChange}
           presentation="date-time"
-          value={toLocalDate(internalValue)}
+          value={datetimeValue}
         ></IonDatetime>
       </IonModal>
     </>

From e2a15fa32c4bad98eef307e61fda8733066bcce6 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 17 Sep 2024 11:28:08 -0400
Subject: [PATCH 16/18] tests

---
 .../Input/__tests__/DateInput.test.tsx        | 24 +++++++++-
 .../Input/__tests__/DatetimeInput.test.tsx    | 46 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/common/components/Input/__tests__/DatetimeInput.test.tsx

diff --git a/src/common/components/Input/__tests__/DateInput.test.tsx b/src/common/components/Input/__tests__/DateInput.test.tsx
index 81e79ca..0ad42b8 100644
--- a/src/common/components/Input/__tests__/DateInput.test.tsx
+++ b/src/common/components/Input/__tests__/DateInput.test.tsx
@@ -1,9 +1,10 @@
 import { describe, expect, it } from 'vitest';
 import { Form, Formik } from 'formik';
 
-import { render, screen } from 'test/test-utils';
+import { render, screen, waitFor } from 'test/test-utils';
 
 import DateInput from '../DateInput';
+import userEvent from '@testing-library/user-event';
 
 describe('DateInput', () => {
   it('should render successfully', async () => {
@@ -20,4 +21,25 @@ describe('DateInput', () => {
     // ASSERT
     expect(screen.getByTestId('input')).toBeDefined();
   });
+
+  it('should display initial value', async () => {
+    // ARRANGE
+    render(
+      <Formik initialValues={{ testField: '2024-01-01' }} onSubmit={() => {}}>
+        <Form>
+          <DateInput name="testField" testid="input" />
+        </Form>
+      </Formik>,
+    );
+    await screen.findByTestId('input-button-calendar');
+
+    // ACT
+    await userEvent.click(screen.getByTestId('input-button-calendar'));
+
+    // ASSERT
+    expect(screen.getByTestId('input')).toBeDefined();
+    expect(screen.getByTestId('input')).toHaveValue('Jan 1, 2024');
+    expect(screen.getByTestId('input-datetime')).toBeDefined();
+    expect(screen.getByTestId('input-datetime')).toHaveValue('2024-01-01T00:00');
+  });
 });
diff --git a/src/common/components/Input/__tests__/DatetimeInput.test.tsx b/src/common/components/Input/__tests__/DatetimeInput.test.tsx
new file mode 100644
index 0000000..659932e
--- /dev/null
+++ b/src/common/components/Input/__tests__/DatetimeInput.test.tsx
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { Form, Formik } from 'formik';
+
+import { render, screen } from 'test/test-utils';
+
+import DatetimeInput from '../DatetimeInput';
+import userEvent from '@testing-library/user-event';
+
+describe('DatetimeInput', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(
+      <Formik initialValues={{ testField: '' }} onSubmit={() => {}}>
+        <Form>
+          <DatetimeInput name="testField" testid="input" />
+        </Form>
+      </Formik>,
+    );
+    await screen.findByTestId('input');
+
+    // ASSERT
+    expect(screen.getByTestId('input')).toBeDefined();
+    expect(screen.getByTestId('input')).toHaveValue('');
+  });
+
+  it('should display initial value', async () => {
+    // ARRANGE
+    render(
+      <Formik initialValues={{ testField: '2024-01-01T05:00:00Z' }} onSubmit={() => {}}>
+        <Form>
+          <DatetimeInput name="testField" testid="input" />
+        </Form>
+      </Formik>,
+    );
+    await screen.findByTestId('input-button-calendar');
+
+    // ACT
+    await userEvent.click(screen.getByTestId('input-button-calendar'));
+
+    // ASSERT
+    expect(screen.getByTestId('input')).toBeDefined();
+    expect(screen.getByTestId('input')).toHaveValue('Jan 1, 2024 5:00 AM');
+    expect(screen.getByTestId('input-datetime')).toBeDefined();
+    expect(screen.getByTestId('input-datetime')).toHaveValue('2024-01-01T05:00');
+  });
+});

From adb30d8e6317f6682e073d81b71fe43a84f89962 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 17 Sep 2024 11:30:00 -0400
Subject: [PATCH 17/18] tests

---
 src/common/components/Input/__tests__/DateInput.test.tsx     | 4 ++--
 src/common/components/Input/__tests__/DatetimeInput.test.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/components/Input/__tests__/DateInput.test.tsx b/src/common/components/Input/__tests__/DateInput.test.tsx
index 0ad42b8..58cba42 100644
--- a/src/common/components/Input/__tests__/DateInput.test.tsx
+++ b/src/common/components/Input/__tests__/DateInput.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
 
-import { render, screen, waitFor } from 'test/test-utils';
+import { render, screen } from 'test/test-utils';
 
 import DateInput from '../DateInput';
-import userEvent from '@testing-library/user-event';
 
 describe('DateInput', () => {
   it('should render successfully', async () => {
diff --git a/src/common/components/Input/__tests__/DatetimeInput.test.tsx b/src/common/components/Input/__tests__/DatetimeInput.test.tsx
index 659932e..01680d7 100644
--- a/src/common/components/Input/__tests__/DatetimeInput.test.tsx
+++ b/src/common/components/Input/__tests__/DatetimeInput.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
 
 import { render, screen } from 'test/test-utils';
 
 import DatetimeInput from '../DatetimeInput';
-import userEvent from '@testing-library/user-event';
 
 describe('DatetimeInput', () => {
   it('should render successfully', async () => {

From 23ef7f7dc4967063bb1cd84bff354fec917eccba Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 17 Sep 2024 16:48:02 -0400
Subject: [PATCH 18/18] docs

---
 src/__fixtures__/profiles.ts                  |  2 +-
 src/common/components/Input/DateInput.tsx     | 15 +++++++++++++--
 src/common/components/Input/DatetimeInput.tsx | 19 +++++++++++++++----
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/__fixtures__/profiles.ts b/src/__fixtures__/profiles.ts
index f57de99..043049a 100644
--- a/src/__fixtures__/profiles.ts
+++ b/src/__fixtures__/profiles.ts
@@ -4,5 +4,5 @@ export const profileFixture1: Profile = {
   name: 'Test User',
   email: 'test1@example.com',
   bio: 'My name is Test User.',
-  dateOfBirth: '2002-07-20T08:32:00-04:00',
+  dateOfBirth: '2002-05-07',
 };
diff --git a/src/common/components/Input/DateInput.tsx b/src/common/components/Input/DateInput.tsx
index 8eb9307..13d5160 100644
--- a/src/common/components/Input/DateInput.tsx
+++ b/src/common/components/Input/DateInput.tsx
@@ -25,7 +25,7 @@ const DEFAULT_FORMAT_DATE: Intl.DateTimeFormatOptions = {
  * `DateValue` describes the possible types of an `IonDatetime` whose `presentation`
  * is 'date'.
  */
-export type DateValue = string | null;
+type DateValue = string | null;
 
 /**
  * Properties for the `DateInput` component.
@@ -41,6 +41,17 @@ interface DateInputProps
     Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'multiple' | 'name' | 'presentation'>,
     Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
 
+/**
+ * The `DateInput` component renders an `IonDatetime` which is integrated with
+ * Formik. The form field value is displayed in an `IonInput`. When that input
+ * is clicked, an `IonDatetime` is presented within an `IonModal`.
+ *
+ * Use this component when you need to collect a date value within a form. The
+ * date value will be set as an ISO8601 date, e.g. YYYY-MM-DD
+ *
+ * @param {DateInputProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
 const DateInput = ({
   className,
   label,
@@ -49,7 +60,7 @@ const DateInput = ({
   testid = 'input-date',
   ...datetimeProps
 }: DateInputProps): JSX.Element => {
-  const [field, meta, helpers] = useField(datetimeProps.name);
+  const [field, meta, helpers] = useField<DateValue>(datetimeProps.name);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   // populate error text only if the field has been touched and has an error
diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index 0451bda..83cfb6b 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -36,7 +36,7 @@ const DEFAULT_FORMAT_TIME: Intl.DateTimeFormatOptions = {
  * `DatetimeValue` describes the possible types of an `IonDatetime` whose `presentation`
  * is 'date-time'.
  */
-export type DatetimeValue = string | null;
+type DatetimeValue = string | null;
 
 /**
  * Properties for the `DatetimeInput` component.
@@ -52,6 +52,17 @@ interface DatetimeInputProps
     Omit<ComponentPropsWithoutRef<typeof IonDatetime>, 'multiple' | 'name' | 'presentation'>,
     Required<Pick<ComponentPropsWithoutRef<typeof IonDatetime>, 'name'>> {}
 
+/**
+ * The `DatetimeInput` component renders an `IonDatetime` which is integrated with
+ * Formik. The form field value is displayed in an `IonInput`. When that input
+ * is clicked, an `IonDatetime` is presented within an `IonModal`.
+ *
+ * Use this component when you need to collect a date and time, a timestamp,
+ * value within a form. The value will be set as an ISO8601 timestamp.
+ *
+ * @param {DateInputProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
 const DatetimeInput = ({
   className,
   label,
@@ -60,7 +71,7 @@ const DatetimeInput = ({
   testid = 'input-datetime',
   ...datetimeProps
 }: DatetimeInputProps): JSX.Element => {
-  const [field, meta, helpers] = useField(datetimeProps.name);
+  const [field, meta, helpers] = useField<DatetimeValue>(datetimeProps.name);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   // populate error text only if the field has been touched and has an error
@@ -91,7 +102,7 @@ const DatetimeInput = ({
   };
 
   // format the value to display in the IonInput
-  const formattedValue = useMemo(() => {
+  const inputValue = useMemo(() => {
     if (field.value) {
       const date = new Intl.DateTimeFormat(
         undefined,
@@ -130,7 +141,7 @@ const DatetimeInput = ({
         labelPlacement={labelPlacement}
         onFocus={() => setIsOpen(true)}
         readonly
-        value={formattedValue}
+        value={inputValue}
       >
         <IonButton
           aria-hidden="true"