feat(web/input): returnString for date inputs (#411)

* feat(interface/input): useFormat field

* feat(interface/input): useFormat field

* feat(types/dialog): useFormat field

* feat(components/date): format date conversion

* tweak(components/date): forgot other data type

* chore(interface/input): more descriptive name

* chore(interface/input): more descriptive name

* chore(types/dialog): more descriptive name

* tweak(components/date): reset things

* feat(dialog/input): date conversion with returnString

* refactor(web/input): remove unnecessary state

---------

Co-authored-by: Luke <39926192+LukeWasTakenn@users.noreply.github.com>

web/src/features/dialog/InputDialog.tsx

@@ -14,7 +14,8 @@ import ColorField from './components/fields/color';
 import DateField from './components/fields/date';
 import TextareaField from './components/fields/textarea';
 import TimeField from './components/fields/time';
-import type { InputProps } from '../../typings';
+import type { IDateInput, InputProps } from '../../typings';
+import dayjs from 'dayjs';
 
 export type FormValues = {
   test: {
@@ -80,6 +81,14 @@ const InputDialog: React.FC = () => {
   const onSubmit = form.handleSubmit(async (data) => {
     setVisible(false);
     const values: any[] = [];
+    for (let i = 0; i < fields.rows.length; i++) {
+      const row = fields.rows[i];
+
+      if ((row.type === 'date' || row.type === 'date-range') && row.returnString) {
+        if (!data.test[i]) continue;
+        data.test[i].value = dayjs(data.test[i].value).format(row.format || 'DD/MM/YYYY');
+      }
+    }
     Object.values(data.test).forEach((obj: { value: any }) => values.push(obj.value));
     await new Promise((resolve) => setTimeout(resolve, 200));
     form.reset();

web/src/features/dialog/components/fields/date.tsx

@@ -1,7 +1,7 @@
 import { IDateInput } from '../../../../typings/dialog';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
-import { DatePicker, DateRangePicker, TimeInput } from '@mantine/dates';
+import { DatePicker, DateRangePicker } from '@mantine/dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
@@ -51,9 +51,7 @@ const DateField: React.FC<Props> = (props) => {
           name={controller.field.name}
           ref={controller.field.ref}
           onBlur={controller.field.onBlur}
-          onChange={(dates) =>
-            controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
-          }
+          onChange={(dates) => controller.field.onChange(dates.map((date: Date | null) => date ? date.getTime() : null))}
           label={props.row.label}
           description={props.row.description}
           placeholder={props.row.format}

web/src/typings/dialog.ts

@@ -59,6 +59,7 @@ export interface IColorInput extends BaseField<'color', string> {
 export interface IDateInput
   extends Omit<BaseField<'date' | 'date-range', string | [string, string] | true>, 'placeholder'> {
   format?: string;
+  returnString?: boolean;
   clearable?: boolean;
   min?: string;
   max?: string;