use correct date format in date picker on form page. w/ burnettk
This commit is contained in:
parent
69e92cc815
commit
71a2ec35ae
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue