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

This commit is contained in:
jasquat 2023-04-12 15:49:54 -04:00
parent 71a2ec35ae
commit 8cb38bada3
No known key found for this signature in database
4 changed files with 40 additions and 4 deletions

View File

@ -59,12 +59,27 @@ export const convertDateObjectToFormattedString = (dateObject: Date) => {
return null; 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 = ( export const convertDateAndTimeStringsToDate = (
dateString: string, dateString: string,
timeString: string timeString: string
) => { ) => {
if (dateString && timeString) { if (dateString && timeString) {
return new Date(`${dateString}T${timeString}`); return new Date(`${dateStringToYMDFormat(dateString)}T${timeString}`);
} }
return null; return null;
}; };
@ -84,6 +99,11 @@ export const convertStringToDate = (dateString: string) => {
return convertDateAndTimeStringsToSeconds(dateString, '00:10:00'); return convertDateAndTimeStringsToSeconds(dateString, '00:10:00');
}; };
export const ymdDateStringToConfiguredFormat = (dateString: string) => {
const dateObject = convertStringToDate(dateString);
return convertDateObjectToFormattedString(dateObject);
};
export const convertSecondsToDateObject = (seconds: number) => { export const convertSecondsToDateObject = (seconds: number) => {
if (seconds) { if (seconds) {
return new Date(seconds * 1000); return new Date(seconds * 1000);

View File

@ -19,7 +19,10 @@ import MDEditor from '@uiw/react-md-editor';
import Form from '../themes/carbon'; import Form from '../themes/carbon';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
import useAPIError from '../hooks/UseApiError'; import useAPIError from '../hooks/UseApiError';
import { modifyProcessIdentifierForPathParam } from '../helpers'; import {
dateStringToYMDFormat,
modifyProcessIdentifierForPathParam,
} from '../helpers';
import { ProcessInstanceTask } from '../interfaces'; import { ProcessInstanceTask } from '../interfaces';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb';

View File

@ -10,6 +10,7 @@ import {
import { useCallback } from 'react'; import { useCallback } from 'react';
import { DATE_FORMAT, DATE_FORMAT_CARBON } from '../../../config'; 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. /** 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. * 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; let component = null;
if (type === 'date') { 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 = ( component = (
<DatePicker <DatePicker
dateFormat={DATE_FORMAT_CARBON} dateFormat={DATE_FORMAT_CARBON}
@ -116,10 +124,10 @@ export default function BaseInputTemplate<
helperText={helperText} helperText={helperText}
type="text" type="text"
size="md" size="md"
value={dateValue}
autocomplete="off" autocomplete="off"
allowInput={false} allowInput={false}
onChange={_onChange} onChange={_onChange}
value={value || value === 0 ? value : ''}
invalid={invalid} invalid={invalid}
invalidText={errorMessageForField} invalidText={errorMessageForField}
autoFocus={autofocus} autoFocus={autofocus}

View File

@ -1,5 +1,6 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { getTemplate, WidgetProps } from '@rjsf/utils'; import { getTemplate, WidgetProps } from '@rjsf/utils';
import { dateStringToYMDFormat } from '../../../helpers';
function DateWidget(props: WidgetProps) { function DateWidget(props: WidgetProps) {
const { onChange, options, registry } = props; const { onChange, options, registry } = props;
@ -9,7 +10,11 @@ function DateWidget(props: WidgetProps) {
options options
); );
const handleChange = useCallback( 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] [onChange]
); );