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 = generalDateFormat;
-export const DATE_FORMAT_CARBON = 'Y-m-d';
+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,35 +101,65 @@ export default function BaseInputTemplate<
     }
   }
 
-  return (
+  let component = null;
-    <>
+  if (type === 'date') {
-      <TextInput
+    component = (
-        id={id}
+      <DatePicker
-        name={id}
+        className="date-input"
-        className="text-input"
+        dateFormat="m-d-Y"
-        helperText={helperText}
+        datePickerType="single"
-        invalid={invalid}
+      >
-        invalidText={errorMessageForField}
+        <DatePickerInput
-        autoFocus={autofocus}
+          id={id}
-        disabled={disabled || readonly}
+          placeholder="m-d-Y"
-        value={value || value === 0 ? value : ''}
+          helperText={helperText}
-        onChange={_onChange}
+          type="text"
-        onBlur={_onBlur}
+          size="md"
-        onFocus={_onFocus}
+          autocomplete="off"
-        // eslint-disable-next-line react/jsx-props-no-spreading
+          allowInput={false}
-        {...inputProps}
+          onChange={_onChange}
-      />
+          value={value || value === 0 ? value : ''}
-      {Array.isArray(schema.examples) && (
+          invalid={invalid}
-        <datalist key={`datalist_${id}`} id={`examples_${id}`}>
+          invalidText={errorMessageForField}
-          {[
+          autoFocus={autofocus}
-            ...new Set(
+          disabled={disabled || readonly}
-              schema.examples.concat(schema.default ? [schema.default] : [])
+          onBlur={_onBlur}
-            ),
+          onFocus={_onFocus}
-          ].map((example: any) => (
+        />
-            <option key={example} value={example} />
+      </DatePicker>
-          ))}
+    );
-        </datalist>
+  } else {
-      )}
+    component = (
-    </>
+      <>
-  );
+        <TextInput
+          id={id}
+          name={id}
+          className="text-input"
+          helperText={helperText}
+          invalid={invalid}
+          invalidText={errorMessageForField}
+          autoFocus={autofocus}
+          disabled={disabled || readonly}
+          value={value || value === 0 ? value : ''}
+          onChange={_onChange}
+          onBlur={_onBlur}
+          onFocus={_onFocus}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...inputProps}
+        />
+        {Array.isArray(schema.examples) && (
+          <datalist key={`datalist_${id}`} id={`examples_${id}`}>
+            {[
+              ...new Set(
+                schema.examples.concat(schema.default ? [schema.default] : [])
+              ),
+            ].map((example: any) => (
+              <option key={example} value={example} />
+            ))}
+          </datalist>
+        )}
+      </>
+    );
+  }
+  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;
+}