allow setting date format using an env var at boot time w/ burnettk

spiffworkflow-frontend/src/config.tsx

@@ -75,9 +75,26 @@ export const PROCESS_STATUSES = [
 ];
 
 // with time: yyyy-MM-dd HH:mm:ss
-export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+let generalDateFormat = 'yyyy-MM-dd';
+if (
+  'spiffworkflowFrontendJsenv' in window &&
+  'DATE_FORMAT' in window.spiffworkflowFrontendJsenv
+) {
+  generalDateFormat = window.spiffworkflowFrontendJsenv.DATE_FORMAT;
+}
+const supportedDateFormats = ['yyyy-MM-dd', 'dd-MM-yyyy', 'MM-dd-yyyy'];
+if (!supportedDateFormats.includes(generalDateFormat)) {
+  throw new Error(
+    `Given SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_DATE_FORMAT is not supported. Given: ${generalDateFormat}. Valid options are: ${supportedDateFormats}`
+  );
+}
+const carbonDateFormat = generalDateFormat
+  .replace('yyyy', 'Y')
+  .replace('MM', 'm')
+  .replace('dd', 'd');
+export const DATE_TIME_FORMAT = `${generalDateFormat} HH:mm:ss`;
 export const TIME_FORMAT_HOURS_MINUTES = 'HH:mm';
-export const DATE_FORMAT = 'yyyy-MM-dd';
-export const DATE_FORMAT_CARBON = 'Y-m-d';
+export const DATE_FORMAT = generalDateFormat;
+export const DATE_FORMAT_CARBON = carbonDateFormat;
 
 export const SPIFF_ENVIRONMENT = spiffEnvironment;

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

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { TextInput } from '@carbon/react';
+import { DatePicker, DatePickerInput, TextInput } from '@carbon/react';
 import {
   getInputProps,
   FormContextType,
@@ -101,7 +101,35 @@ export default function BaseInputTemplate<
     }
   }
 
-  return (
+  let component = null;
+  if (type === 'date') {
+    component = (
+      <DatePicker
+        className="date-input"
+        dateFormat="m-d-Y"
+        datePickerType="single"
+      >
+        <DatePickerInput
+          id={id}
+          placeholder="m-d-Y"
+          helperText={helperText}
+          type="text"
+          size="md"
+          autocomplete="off"
+          allowInput={false}
+          onChange={_onChange}
+          value={value || value === 0 ? value : ''}
+          invalid={invalid}
+          invalidText={errorMessageForField}
+          autoFocus={autofocus}
+          disabled={disabled || readonly}
+          onBlur={_onBlur}
+          onFocus={_onFocus}
+        />
+      </DatePicker>
+    );
+  } else {
+    component = (
       <>
         <TextInput
           id={id}
@@ -132,4 +160,6 @@ export default function BaseInputTemplate<
         )}
       </>
     );
+  }
+  return component;
 }

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

@@ -8,9 +8,11 @@ function DateWidget(props: WidgetProps) {
     registry,
     options
   );
+
   return (
     <BaseInputTemplate
       type="date"
+      dateFormat="Y-m-d"
       InputLabelProps={{
         shrink: true,
       }}

spiffworkflow-frontend/src/themes/carbon/index.css

@@ -25,3 +25,7 @@
 .rjsf .text-input {
   padding-top: 8px;
 }
+
+.rjsf .date-input {
+  padding-top: 8px;
+}