display the date in a react json schema form like the config but change it to y-m-d for processing w/ burnettk

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

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';
 

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 `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> 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 = (
       <DatePicker
         dateFormat={DATE_FORMAT_CARBON}
@@ -116,10 +124,10 @@ export default function BaseInputTemplate<
           helperText={helperText}
           type="text"
           size="md"
+          value={dateValue}
           autocomplete="off"
           allowInput={false}
           onChange={_onChange}
-          value={value || value === 0 ? value : ''}
           invalid={invalid}
           invalidText={errorMessageForField}
           autoFocus={autofocus}

spiffworkflow-frontend/src/themes/carbon/DateWidget/DateWidget.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { getTemplate, WidgetProps } from '@rjsf/utils';
+import { dateStringToYMDFormat } from '../../../helpers';
 
 function DateWidget(props: WidgetProps) {
   const { onChange, options, registry } = props;
@@ -9,7 +10,11 @@ function DateWidget(props: WidgetProps) {
     options
   );
   const handleChange = useCallback(
-    (value: any) => onChange(value || undefined),
+    (value: any) => {
+      // react json schema forces y-m-d format for dates
+      const newValue = dateStringToYMDFormat(value);
+      onChange(newValue || undefined);
+    },
     [onChange]
   );