Add date time formats context

src/components/BaseQuestionnaireResponseForm/widgets/date.tsx

@@ -1,12 +1,10 @@
 import { Form } from 'antd';
 import moment, { type Moment } from 'moment';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { QuestionItemProps } from 'sdc-qrf';
 
 import {
-    FHIRDateFormat,
     FHIRTimeFormat,
-    FHIRDateTimeFormat,
     formatFHIRDate,
     formatFHIRDateTime,
     formatFHIRTime,
@@ -16,6 +14,7 @@ import { DatePicker } from 'src/components/DatePicker';
 import { TimePicker } from 'src/components/TimePicker';
 
 import { useFieldController } from '../hooks';
+import { DateTimeFormatContext } from 'src/contexts/date-time-format';
 
 export function QuestionDateTime({ parentPath, questionItem }: QuestionItemProps) {
     const { linkId, type, regex } = questionItem;
@@ -46,6 +45,7 @@ interface DateTimePickerWrapperProps {
 }
 
 function DateTimePickerWrapper(props: DateTimePickerWrapperProps) {
+    const { humanDate, humanTime, humanDateTime } = useContext(DateTimeFormatContext);
     const { value, onChange, type, disabled, placeholder, format } = props;
 
     const newValue = useMemo(() => {
@@ -65,15 +65,15 @@ function DateTimePickerWrapper(props: DateTimePickerWrapperProps) {
     let formatFunction: (value: Moment) => string;
 
     if (type === 'date') {
-        resultFormat = format || FHIRDateFormat;
+        resultFormat = format || humanDate;
         showTime = false;
         formatFunction = formatFHIRDate;
     } else if (type === 'time') {
-        resultFormat = format || FHIRTimeFormat;
+        resultFormat = format || humanTime;
         showTime = { format: resultFormat };
         formatFunction = formatFHIRTime;
     } else {
-        resultFormat = format || FHIRDateTimeFormat;
+        resultFormat = format || humanDateTime;
         showTime = { format: resultFormat };
         formatFunction = formatFHIRDateTime;
     }

src/contexts/date-time-format.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import { humanDate, humanDateTime, humanDateYearMonth, humanTime } from 'src/utils/date';
+
+export const defaultDateTimeFormats = { humanDate, humanDateYearMonth, humanTime, humanDateTime };
+
+export const DateTimeFormatContext = createContext(defaultDateTimeFormats);

src/main.tsx

@@ -17,6 +17,7 @@ import { ValueSetExpandProvider } from './contexts';
 import { expandEMRValueSet } from './services';
 import * as serviceWorker from './serviceWorker';
 import { ThemeProvider } from './theme/ThemeProvider';
+import { DateTimeFormatContext, defaultDateTimeFormats } from './contexts/date-time-format';
 
 const AppWithContext = () => {
     useEffect(() => {
@@ -25,13 +26,15 @@ const AppWithContext = () => {
 
     return (
         <I18nProvider i18n={i18n}>
-            <PatientDashboardProvider dashboard={dashboard}>
-                <ValueSetExpandProvider.Provider value={expandEMRValueSet}>
-                    <ThemeProvider>
-                        <App />
-                    </ThemeProvider>
-                </ValueSetExpandProvider.Provider>
-            </PatientDashboardProvider>
+            <DateTimeFormatContext.Provider value={defaultDateTimeFormats}>
+                <PatientDashboardProvider dashboard={dashboard}>
+                    <ValueSetExpandProvider.Provider value={expandEMRValueSet}>
+                        <ThemeProvider>
+                            <App />
+                        </ThemeProvider>
+                    </ValueSetExpandProvider.Provider>
+                </PatientDashboardProvider>
+            </DateTimeFormatContext.Provider>
         </I18nProvider>
     );
 };