diff --git a/src/components/BaseQuestionnaireResponseForm/widgets/date.tsx b/src/components/BaseQuestionnaireResponseForm/widgets/date.tsx index c00dcb9b..564cb5a5 100644 --- a/src/components/BaseQuestionnaireResponseForm/widgets/date.tsx +++ b/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; } diff --git a/src/contexts/date-time-format.ts b/src/contexts/date-time-format.ts new file mode 100644 index 00000000..c5cfcafd --- /dev/null +++ b/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); diff --git a/src/main.tsx b/src/main.tsx index 1ef4eb2a..5672a944 100644 --- a/src/main.tsx +++ b/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 ( - - - - - - - + + + + + + + + + ); };