feat: add format validation to datefields and to dates in schemas

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-25T10:03:10.019Z\n"
-"PO-Revision-Date: 2024-11-25T10:03:10.019Z\n"
+"POT-Creation-Date: 2024-11-26T11:33:11.035Z\n"
+"PO-Revision-Date: 2024-11-26T11:33:11.035Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -891,6 +891,9 @@ msgstr "This field requires a unique value, please choose another one"
 msgid "{{label}} (required)"
 msgstr "{{label}} (required)"
 
+msgid "Should not exceed {{maxLength}} characters"
+msgstr "Should not exceed {{maxLength}} characters"
+
 msgid "No changes to be saved"
 msgstr "No changes to be saved"
 
@@ -1241,8 +1244,8 @@ msgstr ""
 "Choose where this new organisation unit should be placed in the existing "
 "hierarchy"
 
-msgid "Set up the basic information for this organisation unit."
-msgstr "Set up the basic information for this organisation unit."
+msgid "Set up the basic information for this organisation unit"
+msgstr "Set up the basic information for this organisation unit"
 
 msgid "Opening date"
 msgstr "Opening date"
@@ -1311,6 +1314,22 @@ msgstr ""
 "This is the first organisation unit and will be created as the root of the "
 "hierarchy."
 
+msgid "Must be a valid mobile number"
+msgstr "Must be a valid mobile number"
+
+msgid "Must be a valid url"
+msgstr "Must be a valid url"
+
+msgid ""
+"Longitude should be between -90 and 90. Latitude should be between -180 and "
+"180"
+msgstr ""
+"Longitude should be between -90 and 90. Latitude should be between -180 and "
+"180"
+
+msgid "Parent organisation unit cannot be itself or a descendant of itself."
+msgstr "Parent organisation unit cannot be itself or a descendant of itself."
+
 msgid "No organisation units available"
 msgstr "No organisation units available"
 

src/components/form/fields/DateField.tsx

@@ -1,7 +1,8 @@
 import { CalendarInput, CalendarInputProps } from '@dhis2/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useField } from 'react-final-form'
 import { selectedLocale, useSystemSetting } from '../../../lib'
+import i18n from '@dhis2/d2-i18n'
 
 type DateFieldProps = Omit<
     CalendarInputProps,
@@ -16,6 +17,7 @@ type ValidationProps = {
     error: boolean
     validationText?: string
     valid?: boolean
+    validationCode?: string
 }
 export function DateField({
     name,
@@ -29,13 +31,21 @@ export function DateField({
         error: false,
     })
 
-    const { input } = useField<string | undefined>(name, {
-        validate: () => {
-            if (validation.error) {
-                return validation.validationText
-            }
-        },
-    })
+    const { input, meta } = useField<string | undefined>(name)
+
+    useEffect(() => {
+        // TODO: remove once required is an accepted prop in calendar input
+        if (input.value === '' && meta.touched && required) {
+            setValidation({
+                error: true,
+                valid: false,
+                validationCode: 'EMPTY',
+                validationText: i18n.t(
+                    'You do not have the authority to view this page.'
+                ),
+            })
+        }
+    }, [required, input.value, meta.touched])
 
     const handleChange: CalendarInputProps['onDateSelect'] = (
         payload: {
@@ -58,6 +68,7 @@ export function DateField({
                 onDateSelect={handleChange}
                 timeZone={'utc'}
                 locale={locale}
+                format={'YYYY-MM-DD'}
                 onBlur={(_, e) => input.onBlur(e)}
                 clearable
                 label={required ? `${label} (required) *` : label}

src/pages/categoryOptions/form/categoryOptionSchema.ts

@@ -19,8 +19,8 @@ export const categoryOptionSchema = identifiable
             })
             .optional(),
         description: z.string().trim().optional(),
-        startDate: z.string().optional(),
-        endDate: z.string().optional(),
+        startDate: z.string().date().optional(),
+        endDate: z.string().date().optional(),
         organisationUnits: referenceCollection.optional(),
     })
     .refine(

src/pages/organisationUnits/form/organisationUnitSchema.ts

@@ -33,7 +33,7 @@ export const organisationUnitSchema = identifiable
                 }),
             })
             .optional(),
-        openingDate: z.string(),
+        openingDate: z.string().date(),
         email: z.string().email().optional(),
         address: z
             .string()
@@ -47,7 +47,7 @@ export const organisationUnitSchema = identifiable
             .string()
             .url({ message: i18n.t('Must be a valid url') })
             .optional(),
-        closedDate: z.string().optional(),
+        closedDate: z.string().date().optional(),
         comment: z
             .string()
             .max(2147483647, {