diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index 273e12ae..6599acc3 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/spiffworkflow-frontend/src/helpers.tsx @@ -59,12 +59,27 @@ export const convertDateObjectToFormattedString = (dateObject: Date) => { return null; }; +export const dateStringToYMDFormat = (dateString: string) => { + if (dateString.length < 10) { + return dateString; + } + if (DATE_FORMAT.startsWith('dd')) { + const d = dateString.split('-'); + return `${d[2]}-${d[1]}-${d[0]}`; + } + if (DATE_FORMAT.startsWith('MM')) { + const d = dateString.split('-'); + return `${d[2]}-${d[0]}-${d[1]}`; + } + return dateString; +}; + export const convertDateAndTimeStringsToDate = ( dateString: string, timeString: string ) => { if (dateString && timeString) { - return new Date(`${dateString}T${timeString}`); + return new Date(`${dateStringToYMDFormat(dateString)}T${timeString}`); } return null; }; @@ -84,6 +99,11 @@ export const convertStringToDate = (dateString: string) => { return convertDateAndTimeStringsToSeconds(dateString, '00:10:00'); }; +export const ymdDateStringToConfiguredFormat = (dateString: string) => { + const dateObject = convertStringToDate(dateString); + return convertDateObjectToFormattedString(dateObject); +}; + export const convertSecondsToDateObject = (seconds: number) => { if (seconds) { return new Date(seconds * 1000); diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx index 863ee5f3..5b92d64a 100644 --- a/spiffworkflow-frontend/src/routes/TaskShow.tsx +++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx @@ -19,7 +19,10 @@ import MDEditor from '@uiw/react-md-editor'; import Form from '../themes/carbon'; import HttpService from '../services/HttpService'; import useAPIError from '../hooks/UseApiError'; -import { modifyProcessIdentifierForPathParam } from '../helpers'; +import { + dateStringToYMDFormat, + modifyProcessIdentifierForPathParam, +} from '../helpers'; import { ProcessInstanceTask } from '../interfaces'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx index da4412cc..1dbda4ce 100644 --- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx @@ -10,6 +10,7 @@ import { import { useCallback } from 'react'; import { DATE_FORMAT, DATE_FORMAT_CARBON } from '../../../config'; +import { ymdDateStringToConfiguredFormat } from '../../../helpers'; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. * It is used as the template for rendering many of the based widgets that differ by `type` and callbacks only. @@ -104,6 +105,13 @@ export default function BaseInputTemplate< let component = null; if (type === 'date') { + // display the date in a date input box as the config wants. + // it should in be y-m-d when it gets here. + let dateValue: string | null = ''; + if (value || value === 0) { + dateValue = ymdDateStringToConfiguredFormat(value); + } + component = ( onChange(value || undefined), + (value: any) => { + // react json schema forces y-m-d format for dates + const newValue = dateStringToYMDFormat(value); + onChange(newValue || undefined); + }, [onChange] );