Handle date input

premieroctet · Nov 20, 2023 · 6b73d90 · 6b73d90
1 parent 65a2f9a
commit 6b73d90
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/packages/next-admin/src/components/Form.tsx b/packages/next-admin/src/components/Form.tsx
@@ -18,6 +18,7 @@ import CheckboxWidget from "./inputs/CheckboxWidget";
 import SelectWidget from "./inputs/SelectWidget";
 import Button from "./radix/Button";
 import DateTimeWidget from "./inputs/DateTimeWidget";
+import DateWidget from "./inputs/DateWidget";
 
 // Override Form functions to not prevent the submit
 class CustomForm extends RjsfForm {
@@ -45,6 +46,7 @@ const fields: CustomForm["props"]["fields"] = {
 };
 
 const widgets: CustomForm["props"]["widgets"] = {
+  DateWidget: DateWidget,
   DateTimeWidget: DateTimeWidget,
   SelectWidget: SelectWidget,
   CheckboxWidget: CheckboxWidget,

diff --git a/packages/next-admin/src/components/inputs/DateWidget.tsx b/packages/next-admin/src/components/inputs/DateWidget.tsx
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { onChange, options, registry, value } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  const handleChange = useCallback((value: any) => onChange(value || undefined), [onChange]);
+
+  const inputValue = value ? new Date(value).toISOString().split('T')[0] : undefined;
+
+  return <BaseInputTemplate type='date' {...props} value={inputValue} onChange={handleChange} />;
+}