From a111ec84ac521bb7e5eb97e85f65b731cfa5bf87 Mon Sep 17 00:00:00 2001
From: jwnasambu <wamalwa1844.com>
Date: Fri, 13 Dec 2024 17:16:04 +0300
Subject: [PATCH] feat/O3-3846: All Calendar Date Pickers should use the same
 OpenmrsDatePicker component across entire EMR

---
 .../mark-patient-deceased-form.workspace.tsx  | 26 ++++----
 .../visit-attribute-type.component.tsx        | 24 +++-----
 .../visit-form/visit-date-time.component.tsx  | 24 +++-----
 .../conditions-widget.component.tsx           | 28 +++------
 .../immunizations-form.workspace.tsx          | 42 ++++---------
 .../drug-order-form.component.tsx             | 17 ++----
 .../src/notes/visit-notes-form.workspace.tsx  | 18 ++----
 .../orders-details-table.component.tsx        | 27 ++-------
 .../cancel-order-form.component.tsx           | 36 +++--------
 .../src/programs/programs-form.workspace.tsx  | 59 ++++++++-----------
 .../print-modal/print-modal.extension.tsx     | 37 ++++--------
 11 files changed, 106 insertions(+), 232 deletions(-)

diff --git a/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx b/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx
index 382002aed0..a0ff7f09ab 100644
--- a/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx
+++ b/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx
@@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   ButtonSet,
-  DatePicker,
-  DatePickerInput,
   DatePickerSkeleton,
   Form,
   InlineLoading,
@@ -23,7 +21,14 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { WarningFilled } from '@carbon/react/icons';
 import { EmptyState, type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
-import { ExtensionSlot, useLayoutType, showSnackbar, ResponsiveWrapper, useConfig } from '@openmrs/esm-framework';
+import {
+  ExtensionSlot,
+  useLayoutType,
+  showSnackbar,
+  ResponsiveWrapper,
+  useConfig,
+  OpenmrsDatePicker,
+} from '@openmrs/esm-framework';
 import { markPatientDeceased, useCausesOfDeath } from '../data.resource';
 import { type ChartConfig } from '../config-schema';
 import styles from './mark-patient-deceased-form.scss';
@@ -134,22 +139,13 @@ const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ close
                   name="deathDate"
                   control={control}
                   render={({ field: { onChange, value } }) => (
-                    <DatePicker
+                    <OpenmrsDatePicker
                       className={styles.datePicker}
-                      dateFormat="d/m/Y"
-                      datePickerType="single"
                       id="deceasedDate"
                       maxDate={new Date().toISOString()}
-                      onChange={([date]) => onChange(date)}
+                      onChange={(date) => onChange(date)}
                       value={value}
-                    >
-                      <DatePickerInput
-                        id="deceasedDateInput"
-                        labelText={t('date', 'Date')}
-                        placeholder="dd/mm/yyyy"
-                        style={{ width: '100%' }}
-                      />
-                    </DatePicker>
+                    />
                   )}
                 />
                 {errors?.deathDate && <p className={styles.errorMessage}>{errors?.deathDate?.message}</p>}
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx
index 63d9e63885..003b388b4d 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useId, useMemo } from 'react';
 import {
   Checkbox,
-  DatePicker,
-  DatePickerInput,
   NumberInput,
   Select,
   SelectItem,
@@ -14,7 +12,7 @@ import {
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { Controller, type ControllerRenderProps, useFormContext } from 'react-hook-form';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type ChartConfig } from '../../config-schema';
 import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from '../hooks/useVisitAttributeType';
 import { type VisitFormData } from './visit-form.resource';
@@ -204,21 +202,13 @@ const AttributeTypeField: React.FC<AttributeTypeFieldProps> = ({
         );
       case 'org.openmrs.customdatatype.datatype.DateDatatype':
         return (
-          <DatePicker
+          <OpenmrsDatePicker
             {...fieldProps}
-            dateFormat="d/m/Y"
-            datePickerType="single"
-            onChange={([date]) => onChange(dayjs(date).format('YYYY-MM-DD'))}
-          >
-            <DatePickerInput
-              id="date-picker-default-id"
-              placeholder="dd/mm/yyyy"
-              labelText={labelText}
-              type="text"
-              invalid={!!errors.visitAttributes?.[uuid]}
-              invalidText={errors.visitAttributes?.[uuid]?.message}
-            />
-          </DatePicker>
+            onChange={(date) => onChange(dayjs(date).format('YYYY-MM-DD'))}
+            labelText={labelText}
+            invalid={!!errors.visitAttributes?.[uuid]}
+            invalidText={errors.visitAttributes?.[uuid]?.message}
+          />
         );
       default:
         return (
diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
index 01849fa3e5..63ca84d8a0 100644
--- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
+++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
-import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
+import { SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, ResponsiveWrapper } from '@openmrs/esm-framework';
 import { type amPm } from '@openmrs/esm-patient-common-lib';
 import { type VisitFormData } from './visit-form.resource';
 import styles from './visit-form.scss';
@@ -49,25 +49,17 @@ const VisitDateTimeField: React.FC<VisitDateTimeFieldProps> = ({
           control={control}
           render={({ field: { onChange, value } }) => (
             <ResponsiveWrapper>
-              <DatePicker
+              <OpenmrsDatePicker
                 className={styles.datePicker}
-                dateFormat="d/m/Y"
-                datePickerType="single"
                 id={dateFieldName}
                 maxDate={maxDateObj}
                 minDate={minDateObj}
-                onChange={([date]) => onChange(date)}
+                onChange={onChange}
                 value={value ? dayjs(value).format('DD/MM/YYYY') : null}
-              >
-                <DatePickerInput
-                  id={`${dateFieldName}Input`}
-                  invalid={Boolean(errors[dateFieldName])}
-                  invalidText={errors[dateFieldName]?.message}
-                  labelText={t('date', 'Date')}
-                  placeholder="dd/mm/yyyy"
-                  style={{ width: '100%' }}
-                />
-              </DatePicker>
+                labelText={t('date', 'Date')}
+                invalid={Boolean(errors[dateFieldName])}
+                invalidText={errors[dateFieldName]?.message}
+              />
             </ResponsiveWrapper>
           )}
         />
diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
index 7e7940d985..5c40f9cded 100644
--- a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
+++ b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx
@@ -4,8 +4,6 @@ import classNames from 'classnames';
 import dayjs from 'dayjs';
 import 'dayjs/plugin/utc';
 import {
-  DatePicker,
-  DatePickerInput,
   FormGroup,
   FormLabel,
   InlineLoading,
@@ -18,7 +16,7 @@ import {
 } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
 import { useFormContext, Controller } from 'react-hook-form';
-import { showSnackbar, useDebounce, useSession, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { showSnackbar, useDebounce, useSession, ResponsiveWrapper, OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
   type CodedCondition,
@@ -277,18 +275,14 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
             control={control}
             render={({ field: { onChange, onBlur, value } }) => (
               <ResponsiveWrapper>
-                <DatePicker
+                <OpenmrsDatePicker
                   id="onsetDate"
-                  datePickerType="single"
-                  dateFormat="d/m/Y"
                   maxDate={dayjs().utc().format()}
-                  placeholder="dd/mm/yyyy"
-                  onChange={([date]) => onChange(date)}
+                  onChange={onChange}
                   onBlur={onBlur}
                   value={value}
-                >
-                  <DatePickerInput id="onsetDateInput" labelText={t('onsetDate', 'Onset date')} />
-                </DatePicker>
+                  labelText={t('onsetDate', 'Onset date')}
+                />
               </ResponsiveWrapper>
             )}
           />
@@ -322,19 +316,15 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
               render={({ field: { onBlur, onChange, value } }) => (
                 <>
                   <ResponsiveWrapper>
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="endDate"
-                      datePickerType="single"
-                      dateFormat="d/m/Y"
                       minDate={new Date(watch('onsetDateTime')).toISOString()}
                       maxDate={dayjs().utc().format()}
-                      placeholder="dd/mm/yyyy"
-                      onChange={([date]) => onChange(date)}
+                      onChange={onChange}
                       onBlur={onBlur}
                       value={value}
-                    >
-                      <DatePickerInput id="abatementDateTime" labelText={t('endDate', 'End date')} />
-                    </DatePicker>
+                      labelText={t('endDate', 'End date')}
+                    />
                   </ResponsiveWrapper>
                 </>
               )}
diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx
index fba58e867e..74857e29d1 100644
--- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx
+++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx
@@ -4,8 +4,6 @@ import dayjs from 'dayjs';
 import {
   Button,
   ButtonSet,
-  DatePicker,
-  DatePickerInput,
   Dropdown,
   Form,
   InlineNotification,
@@ -24,6 +22,7 @@ import {
   toDateObjectStrict,
   showSnackbar,
   ResponsiveWrapper,
+  OpenmrsDatePicker,
 } from '@openmrs/esm-framework';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -229,25 +228,16 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
                   name="vaccinationDate"
                   control={control}
                   render={({ field: { onChange, value } }) => (
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="vaccinationDate"
                       maxDate={new Date().toISOString()}
-                      dateFormat={datePickerFormat}
-                      datePickerType="single"
                       value={value}
-                      onChange={([date]) => onChange(date)}
-                      style={{ paddingBottom: '1rem' }}
-                    >
-                      <DatePickerInput
-                        id="vaccinationDateInput"
-                        placeholder="dd/mm/yyyy"
-                        labelText={t('vaccinationDate', 'Vaccination date')}
-                        type="text"
-                        invalid={!!errors['vaccinationDate']}
-                        invalidText={errors['vaccinationDate']?.message}
-                        style={{ width: '100%' }}
-                      />
-                    </DatePicker>
+                      onChange={(date) => onChange(date)}
+                      style={{ paddingBottom: '1rem', width: '100%' }}
+                      invalid={!!errors['vaccinationDate']}
+                      invalidText={errors['vaccinationDate']?.message}
+                      labelText={t('vaccinationDate', 'Vaccination date')}
+                    />
                   )}
                 />
               </ResponsiveWrapper>
@@ -380,22 +370,14 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
                 control={control}
                 render={({ field: { onChange, value } }) => (
                   <div className={styles.row}>
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="vaccinationExpiration"
                       className="vaccinationExpiration"
                       minDate={immunizationToEditMeta ? null : new Date().toISOString()}
-                      dateFormat={datePickerFormat}
-                      datePickerType="single"
                       value={value}
-                      onChange={([date]) => onChange(date)}
-                    >
-                      <DatePickerInput
-                        id="date-picker-calendar-id"
-                        placeholder="dd/mm/yyyy"
-                        labelText={t('expirationDate', 'Expiration date')}
-                        type="text"
-                      />
-                    </DatePicker>
+                      onChange={(date) => onChange(date)}
+                      labelText={t('expirationDate', 'Expiration date')}
+                    />
                   </div>
                 )}
               />
diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx
index 3226682fb6..c5127a459f 100644
--- a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx
+++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx
@@ -7,8 +7,6 @@ import {
   Checkbox,
   Column,
   ComboBox,
-  DatePicker,
-  DatePickerInput,
   IconButton,
   Form,
   FormGroup,
@@ -30,6 +28,7 @@ import {
   ExtensionSlot,
   formatDate,
   getPatientName,
+  OpenmrsDatePicker,
   parseDate,
   useConfig,
   useLayoutType,
@@ -597,21 +596,13 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt
                       name="startDate"
                       control={control}
                       render={({ field: { onBlur, value, onChange, ref } }) => (
-                        <DatePicker
-                          datePickerType="single"
+                        <OpenmrsDatePicker
                           maxDate={new Date().toISOString()}
                           value={value}
-                          onChange={([newStartDate]) => onChange(newStartDate)}
+                          onChange={(newStartDate) => onChange(newStartDate)}
                           onBlur={onBlur}
                           ref={ref}
-                        >
-                          <DatePickerInput
-                            id="startDatePicker"
-                            placeholder="dd/mm/yyyy"
-                            labelText={t('startDate', 'Start date')}
-                            size={isTablet ? 'lg' : 'sm'}
-                          />
-                        </DatePicker>
+                        />
                       )}
                     />
                   </InputWrapper>
diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx b/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx
index fde9147b3a..3333b8533e 100644
--- a/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx
+++ b/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx
@@ -11,8 +11,6 @@ import {
   Button,
   ButtonSet,
   Column,
-  DatePicker,
-  DatePickerInput,
   Form,
   FormGroup,
   InlineLoading,
@@ -38,6 +36,7 @@ import {
   useConfig,
   useLayoutType,
   useSession,
+  OpenmrsDatePicker,
 } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps, useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../config-schema';
@@ -455,19 +454,12 @@ const VisitNotesForm: React.FC<DefaultPatientWorkspaceProps> = ({
               control={control}
               render={({ field: { onChange, value } }) => (
                 <ResponsiveWrapper>
-                  <DatePicker
-                    dateFormat="d/m/Y"
-                    datePickerType="single"
+                  <OpenmrsDatePicker
                     maxDate={new Date().toISOString()}
                     value={value}
-                    onChange={([date]) => onChange(date)}
-                  >
-                    <DatePickerInput
-                      id="visitDateTimePicker"
-                      labelText={t('visitDate', 'Visit date')}
-                      placeholder="dd/mm/yyyy"
-                    />
-                  </DatePicker>
+                    onChange={(date) => onChange(date)}
+                    labelText={t('visitDate', 'Visit date')}
+                  />
                 </ResponsiveWrapper>
               )}
             />
diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
index 5e5edac6eb..5332166b16 100644
--- a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
+++ b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
@@ -6,8 +6,6 @@ import {
   Button,
   DataTable,
   DataTableSkeleton,
-  DatePicker,
-  DatePickerInput,
   Dropdown,
   InlineLoading,
   Layer,
@@ -49,6 +47,7 @@ import {
   formatDate,
   getCoreTranslation,
   getPatientName,
+  OpenmrsDatePicker,
   PrinterIcon,
   useConfig,
   useLayoutType,
@@ -361,27 +360,13 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
           />
         </div>
         <span className={styles.rangeLabel}>{t('dateRange', 'Date range')}:</span>
-        <DatePicker
-          datePickerType="range"
-          dateFormat={'d/m/Y'}
+        <OpenmrsDatePicker
           value={''}
-          onChange={([startDate, endDate]) => {
-            handleDateFilterChange([startDate, endDate]);
+          onChange={(date: Date) => {
+            handleDateFilterChange([date, date]);
           }}
-        >
-          <DatePickerInput
-            id="startDatePickerInput"
-            data-testid="startDatePickerInput"
-            labelText=""
-            placeholder="dd/mm/yyyy"
-          />
-          <DatePickerInput
-            id="endDatePickerInput"
-            data-testid="endDatePickerInput"
-            labelText=""
-            placeholder="dd/mm/yyyy"
-          />
-        </DatePicker>
+          labelText={t('dateRange', 'Select Date')}
+        />
       </div>
 
       {(() => {
diff --git a/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx b/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx
index 3d77d8d127..b1fee84f33 100644
--- a/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx
+++ b/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx
@@ -4,19 +4,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Button,
-  TextArea,
-  ButtonSet,
-  Column,
-  Form,
-  InlineNotification,
-  Stack,
-  DatePicker,
-  DatePickerInput,
-  InlineLoading,
-} from '@carbon/react';
-import { showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { Button, TextArea, ButtonSet, Column, Form, InlineNotification, Stack, InlineLoading } from '@carbon/react';
+import { OpenmrsDatePicker, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps, usePatientOrders, type Order } from '@openmrs/esm-patient-common-lib';
 import { cancelOrder } from './cancel-order.resource';
 import styles from './cancel-order-form.scss';
@@ -121,24 +110,15 @@ const OrderCancellationForm: React.FC<OrderCancellationFormProps> = ({
               control={control}
               render={({ field: { onChange, value } }) => (
                 <div className={styles.row}>
-                  <DatePicker
+                  <OpenmrsDatePicker
                     id="cancellationDate"
                     minDate={dayjs().startOf('day')}
-                    dateFormat="d/m/Y"
-                    datePickerType="single"
                     value={value}
-                    onChange={([date]) => onChange(date)}
-                    autocomplete="off"
-                  >
-                    <DatePickerInput
-                      id="date-picker-calendar-id"
-                      placeholder="dd/mm/yyyy"
-                      labelText={t('cancellationDate', 'Cancellation date')}
-                      type="text"
-                      invalid={!!errors['cancellationDate']}
-                      invalidText={!!errors['cancellationDate'] && errors['cancellationDate'].message}
-                    />
-                  </DatePicker>
+                    onChange={(date) => onChange(date)}
+                    invalid={!!errors['cancellationDate']}
+                    invalidText={errors['cancellationDate']?.message}
+                    label={t('cancellationDate', 'Cancellation date')}
+                  />
                 </div>
               )}
             />
diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx
index 926f3e74c9..fbf3b4ee75 100644
--- a/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx
+++ b/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx
@@ -4,8 +4,6 @@ import dayjs from 'dayjs';
 import {
   Button,
   ButtonSet,
-  DatePicker,
-  DatePickerInput,
   Form,
   FormGroup,
   InlineLoading,
@@ -18,7 +16,15 @@ import {
 import { z } from 'zod';
 import { useForm, Controller, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { parseDate, showSnackbar, useConfig, useLayoutType, useLocations, useSession } from '@openmrs/esm-framework';
+import {
+  OpenmrsDatePicker,
+  parseDate,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
   createProgramEnrollment,
@@ -57,7 +63,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
   const availableLocations = useLocations();
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments, mutateEnrollments } = useEnrollments(patientUuid);
-  const [isSubmittingForm, setIsSubmittingForm] = useState(false);
   const { showProgramStatusField } = useConfig();
 
   const programsFormSchema = useMemo(() => createProgramsFormSchema(t), [t]);
@@ -90,7 +95,7 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
     control,
     handleSubmit,
     watch,
-    formState: { isDirty },
+    formState: { errors, isDirty, isSubmitting },
   } = useForm<ProgramsFormData>({
     mode: 'all',
     resolver: zodResolver(programsFormSchema),
@@ -126,8 +131,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
       };
 
       try {
-        setIsSubmittingForm(true);
-
         const abortController = new AbortController();
 
         if (currentEnrollment) {
@@ -155,8 +158,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
           subtitle: error instanceof Error ? error.message : 'An unknown error occurred',
         });
       }
-
-      setIsSubmittingForm(false);
     },
     [closeWorkspaceWithSavedChanges, currentEnrollment, currentState, mutateEnrollments, patientUuid, t],
   );
@@ -165,12 +166,13 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
     <Controller
       name="selectedProgram"
       control={control}
-      render={({ fieldState, field: { onChange, value } }) => (
+      render={({ field: { onChange, value } }) => (
         <>
           <Select
             aria-label="program name"
             id="program"
-            invalid={!!fieldState?.error}
+            invalid={!!errors?.selectedProgram}
+            invalidText={errors?.selectedProgram?.message}
             labelText={t('programName', 'Program name')}
             onChange={(event) => onChange(event.target.value)}
             value={value}
@@ -183,7 +185,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
                 </SelectItem>
               ))}
           </Select>
-          <p className={styles.errorMessage}>{fieldState?.error?.message}</p>
         </>
       )}
     />
@@ -194,18 +195,14 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
       name="enrollmentDate"
       control={control}
       render={({ field: { onChange, value } }) => (
-        <DatePicker
+        <OpenmrsDatePicker
           aria-label="enrollment date"
           id="enrollmentDate"
-          datePickerType="single"
-          dateFormat="d/m/Y"
           maxDate={new Date().toISOString()}
-          placeholder="dd/mm/yyyy"
-          onChange={([date]) => onChange(date)}
+          onChange={onChange}
           value={value}
-        >
-          <DatePickerInput id="enrollmentDateInput" labelText={t('dateEnrolled', 'Date enrolled')} />
-        </DatePicker>
+          labelText={t('dateEnrolled', 'Date enrolled')}
+        />
       )}
     />
   );
@@ -215,19 +212,15 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
       name="completionDate"
       control={control}
       render={({ field: { onChange, value } }) => (
-        <DatePicker
+        <OpenmrsDatePicker
           aria-label="completion date"
           id="completionDate"
-          datePickerType="single"
-          dateFormat="d/m/Y"
           minDate={new Date(watch('enrollmentDate')).toISOString()}
           maxDate={new Date().toISOString()}
-          placeholder="dd/mm/yyyy"
-          onChange={([date]) => onChange(date)}
+          onChange={onChange}
           value={value}
-        >
-          <DatePickerInput id="completionDateInput" labelText={t('dateCompleted', 'Date completed')} />
-        </DatePicker>
+          labelText={t('dateCompleted', 'Date completed')}
+        />
       )}
     />
   );
@@ -267,12 +260,13 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
     <Controller
       name="selectedProgramStatus"
       control={control}
-      render={({ fieldState, field: { onChange, value } }) => (
+      render={({ field: { onChange, value } }) => (
         <>
           <Select
             aria-label={t('programStatus', 'Program status')}
             id="programStatus"
-            invalid={!!fieldState?.error}
+            invalid={!!errors?.selectedProgramStatus}
+            invalidText={errors?.selectedProgramStatus?.message}
             labelText={t('programStatus', 'Program status')}
             onChange={(event) => onChange(event.target.value)}
             value={value}
@@ -284,7 +278,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
               </SelectItem>
             ))}
           </Select>
-          <p className={styles.errorMessage}>{fieldState?.error?.message}</p>
         </>
       )}
     />
@@ -343,8 +336,8 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({
         <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button className={styles.button} kind="primary" type="submit">
-          {isSubmittingForm ? (
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {isSubmitting ? (
             <InlineLoading description={t('saving', 'Saving') + '...'} />
           ) : (
             <span>{t('saveAndClose', 'Save and close')}</span>
diff --git a/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx b/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx
index 093b01e685..3daad9ab96 100644
--- a/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx
+++ b/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx
@@ -3,8 +3,6 @@ import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
-  DatePicker,
-  DatePickerInput,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -30,6 +28,7 @@ import {
   usePatient,
   useSession,
   ResponsiveWrapper,
+  OpenmrsDatePicker,
 } from '@openmrs/esm-framework';
 import usePanelData from '../panel-view/usePanelData';
 import styles from './print-modal.scss';
@@ -40,7 +39,7 @@ function PrintModal({ patientUuid, closeDialog }) {
   const session = useSession();
   const { panels } = usePanelData();
   const printContainerRef = useRef(null);
-  const [selectedFromDate, setSelectedFromDate] = useState(null);
+  const [selectedFromDate] = useState(null);
   const [selectedToDate, setSelectedToDate] = useState(null);
   const { excludePatientIdentifierCodeTypes } = useConfig<{
     excludePatientIdentifierCodeTypes: {
@@ -50,8 +49,6 @@ function PrintModal({ patientUuid, closeDialog }) {
     externalModuleName: '@openmrs/esm-patient-banner-app',
   });
   const headerTitle = t('testResults_title', 'Test Results');
-  const datePickerPlaceHolder = 'dd/mm/yyyy';
-  const datePickerFormat = 'd/m/Y';
 
   const tableHeaders = [
     { key: 'testType', header: 'Test Type' },
@@ -117,35 +114,21 @@ function PrintModal({ patientUuid, closeDialog }) {
       <ModalBody className={styles.modalBody}>
         <ResponsiveWrapper>
           <div className={styles.datePickerContainers}>
-            <DatePicker
+            <OpenmrsDatePicker
               className={styles.datePicker}
-              dateFormat={datePickerFormat}
-              datePickerType="single"
               maxDate={new Date().toISOString()}
-              onChange={([date]) => setSelectedFromDate(date)}
+              onChange={setSelectedToDate}
               value={selectedFromDate}
-            >
-              <DatePickerInput
-                labelText={t('startDate', 'Start date')}
-                placeholder={datePickerPlaceHolder}
-                style={{ width: '100%' }}
-              />
-            </DatePicker>
-            <DatePicker
+              labelText={t('startDate', 'Start date')}
+            />
+            <OpenmrsDatePicker
               className={styles.datePicker}
-              dateFormat={datePickerFormat}
-              datePickerType="single"
               minDate={selectedFromDate}
               maxDate={new Date().toISOString()}
-              onChange={([date]) => setSelectedToDate(date)}
+              onChange={setSelectedToDate}
               value={selectedToDate}
-            >
-              <DatePickerInput
-                labelText={t('endDate', 'End date')}
-                placeholder={datePickerPlaceHolder}
-                style={{ width: '100%' }}
-              />
-            </DatePicker>
+              labelText={t('endDate', 'End date')}
+            />
           </div>
         </ResponsiveWrapper>
         <div className={styles.printContainer} ref={printContainerRef}>