feat/O3-3846: All Calendar Date Pickers should use the same OpenmrsDa…

…tePicker component across entire EMR

src/components/orders-table/orders-date-range-picker.scss

@@ -4,12 +4,23 @@
   display: flex;
   gap: layout.$spacing-03;
   align-items: center;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
 .dateRangePicker {
-  flex-grow: unset;
+  display: flex;
+  gap: layout.$spacing-02;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.datePickers {
+  display: flex;
+  gap: layout.$spacing-02;
+}
 
-  input {
-    background-color: transparent;
-  }
+.datePickers .bx--date-picker {
+  flex: 1;
+  min-width: 160px;
 }

src/components/orders-table/orders-date-range-picker.tsx

@@ -1,37 +1,47 @@
-import { DatePicker, DatePickerInput } from '@carbon/react';
-import { useAppContext } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
 import React from 'react';
+import { useAppContext, OpenmrsDatePicker } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DateFilterContext } from '../../types';
 import styles from './orders-date-range-picker.scss';
 
+const OpenmrsDateRangePicker = ({ dateRange, onDateRangeChange, maxDate }) => {
+  const { t } = useTranslation();
+
+  const handleDateChange = (index, date) => {
+    const updatedDateRange = [...dateRange];
+    updatedDateRange[index] = date;
+    onDateRangeChange(updatedDateRange);
+  };
+
+  return (
+    <div className={styles.dateRangePicker}>
+      <p>{t('dateRange', 'Date range')}:</p>
+      <div className={styles.datePickers}>
+        {['start', 'finish'].map((type, index) => (
+          <OpenmrsDatePicker
+            key={type}
+            id={`date-picker-input-id-${type}`}
+            value={dateRange[index]}
+            onChange={(date) => handleDateChange(index, date)}
+            maxDate={maxDate}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
 export const OrdersDateRangePicker = () => {
   const currentDate = new Date();
   const { dateRange, setDateRange } = useAppContext<DateFilterContext>('laboratory-date-filter') ?? {
     dateRange: [dayjs().startOf('day').toDate(), new Date()],
     setDateRange: () => {},
   };
 
-  const { t } = useTranslation();
-
-  const handleOrdersDateRangeChange = (dates: Array<Date>) => {
-    setDateRange(dates);
-  };
-
   return (
     <div className={styles.datePickerWrapper}>
-      <p>{t('dateRange', 'Date range')}:</p>
-      <DatePicker
-        datePickerType="range"
-        className={styles.dateRangePicker}
-        onClose={handleOrdersDateRangeChange}
-        maxDate={currentDate.toISOString()}
-        value={dateRange}
-      >
-        <DatePickerInput id="date-picker-input-id-start" placeholder="dd/mm/yyyy" size="md" />
-        <DatePickerInput id="date-picker-input-id-finish" placeholder="dd/mm/yyyy" size="md" />
-      </DatePicker>
+      <OpenmrsDateRangePicker dateRange={dateRange} onDateRangeChange={setDateRange} maxDate={currentDate} />
     </div>
   );
 };