feat: zod and format to handle responsibility of changing date format

src/components/form/FormBase.tsx

@@ -5,13 +5,14 @@ import {
     FormRenderProps,
     Form as ReactFinalForm,
 } from 'react-final-form'
-import { defaultValueFormatter } from '../../lib/form/'
+import { createFormValidate, defaultValueFormatter } from '../../lib/form/'
 import {
     PartialAttributeValue,
     getAllAttributeValues,
 } from '../../lib/models/attributes'
 import { LoadingSpinner } from '../loading/LoadingSpinner'
 import { useCustomAttributesQuery } from './attributes'
+import { organisationUnitSchema } from '../../pages/organisationUnits/form'
 
 type MaybeModelWithAttributes = {
     id?: string

src/components/form/fields/DateField.tsx

@@ -32,14 +32,10 @@ export function DateField({
         valid: true,
     })
 
-    const { input, meta } = useField<string | undefined>(name)
+    const { input } = useField<string | undefined>(name, {
+        format: (value) => (value ? value.substring(0, 10) : ''),
+    })
 
-    useEffect(() => {
-        if (input.value) {
-            const dateWithNoTimestamp = input.value.substring(0, 10)
-            input.onChange(dateWithNoTimestamp)
-        }
-    }, [])
     const handleChange: CalendarInputProps['onDateSelect'] = (
         payload: {
             calendarDateString: string

src/lib/form/modelFormSchemas.ts

@@ -37,12 +37,15 @@ const style = z.object({
     icon: z.string().optional(),
 })
 
+const dateWithoutTimestampSchema = z.coerce.date()
+
 export const modelFormSchemas = {
     objectReference: modelReference,
     referenceCollection,
     identifiable,
     attributeValues,
     withAttributeValues,
+    dateWithoutTimestampSchema,
     style,
     modelReference,
 }

src/pages/organisationUnits/Edit.tsx

@@ -10,7 +10,11 @@ import {
 } from '../../lib'
 import { useBoundResourceQueryFn } from '../../lib/query/useBoundQueryFn'
 import { OrganisationUnit, PickWithFieldFilters } from '../../types/generated'
-import { OrganisationUnitFormField, validate } from './form'
+import {
+    OrganisationUnitFormField,
+    organisationUnitSchema,
+    validate,
+} from './form'
 
 const fieldFilters = [
     ...DEFAULT_FIELD_FILTERS,
@@ -67,7 +71,7 @@ export const Component = () => {
             })}
             section={section}
             initialValues={orgUnit.data}
-            validate={validate}
+            schema={organisationUnitSchema}
         >
             <DefaultEditFormContents section={section}>
                 <OrganisationUnitFormField />

src/pages/organisationUnits/form/organisationUnitSchema.ts

@@ -2,8 +2,12 @@ import i18n from '@dhis2/d2-i18n'
 import { z } from 'zod'
 import { createFormValidate, getDefaults, modelFormSchemas } from '../../../lib'
 
-const { withAttributeValues, identifiable, referenceCollection } =
-    modelFormSchemas
+const {
+    withAttributeValues,
+    identifiable,
+    referenceCollection,
+    dateWithoutTimestampSchema,
+} = modelFormSchemas
 
 export const organisationUnitSchema = identifiable
     .merge(withAttributeValues)
@@ -25,7 +29,7 @@ export const organisationUnitSchema = identifiable
                 }),
             })
             .optional(),
-        openingDate: z.string().date(),
+        openingDate: dateWithoutTimestampSchema,
         email: z.string().email().optional(),
         address: z
             .string()
@@ -39,7 +43,7 @@ export const organisationUnitSchema = identifiable
             .string()
             .url({ message: i18n.t('Must be a valid url') })
             .optional(),
-        closedDate: z.string().date().optional(),
+        closedDate: dateWithoutTimestampSchema.optional(),
         comment: z
             .string()
             .max(2000, {

src/pages/organisationUnits/list/OrganisationUnitList.tsx

@@ -220,6 +220,7 @@ export const OrganisationUnitList = () => {
     return (
         <div>
             <SectionListTitle />
+            <IdentifiableFilter />
             <div className={css.listDetailsWrapper}>
                 <Toolbar
                     selectedModels={