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]
);