use correct date format in date picker on form page. w/ burnettk

This commit is contained in:
jasquat 2023-04-12 12:45:37 -04:00
parent 69e92cc815
commit 71a2ec35ae
No known key found for this signature in database
2 changed files with 11 additions and 14 deletions

View File

@ -9,6 +9,7 @@ import {
} from '@rjsf/utils'; } from '@rjsf/utils';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { DATE_FORMAT, DATE_FORMAT_CARBON } from '../../../config';
/** 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.
@ -105,13 +106,13 @@ export default function BaseInputTemplate<
if (type === 'date') { if (type === 'date') {
component = ( component = (
<DatePicker <DatePicker
dateFormat={DATE_FORMAT_CARBON}
className="date-input" className="date-input"
dateFormat="m-d-Y"
datePickerType="single" datePickerType="single"
> >
<DatePickerInput <DatePickerInput
id={id} id={id}
placeholder="m-d-Y" placeholder={DATE_FORMAT}
helperText={helperText} helperText={helperText}
type="text" type="text"
size="md" size="md"
@ -125,6 +126,7 @@ export default function BaseInputTemplate<
disabled={disabled || readonly} disabled={disabled || readonly}
onBlur={_onBlur} onBlur={_onBlur}
onFocus={_onFocus} onFocus={_onFocus}
pattern={null}
/> />
</DatePicker> </DatePicker>
); );

View File

@ -1,24 +1,19 @@
import React from 'react'; import React, { useCallback } from 'react';
import { getTemplate, WidgetProps } from '@rjsf/utils'; import { getTemplate, WidgetProps } from '@rjsf/utils';
function DateWidget(props: WidgetProps) { function DateWidget(props: WidgetProps) {
const { options, registry } = props; const { onChange, options, registry } = props;
const BaseInputTemplate = getTemplate<'BaseInputTemplate'>( const BaseInputTemplate = getTemplate<'BaseInputTemplate'>(
'BaseInputTemplate', 'BaseInputTemplate',
registry, registry,
options options
); );
const handleChange = useCallback(
return ( (value: any) => onChange(value || undefined),
<BaseInputTemplate [onChange]
type="date"
dateFormat="Y-m-d"
InputLabelProps={{
shrink: true,
}}
{...props}
/>
); );
return <BaseInputTemplate type="date" {...props} onChange={handleChange} />;
} }
export default DateWidget; export default DateWidget;