feat(web/input): date range picker

web/src/features/dialog/InputDialog.tsx

@@ -59,10 +59,12 @@ const InputDialog: React.FC = () => {
         {
           value:
             row.type !== 'checkbox'
-              ? row.type === 'date'
+              ? row.type === 'date' || row.type === 'date-range'
                 ? // Set date to current one if default is set to true
                   row.default === true
                   ? new Date()
+                  : Array.isArray(row.default)
+                  ? row.default.map((date) => new Date(date))
                   : row.default && new Date(row.default)
                 : row.default
               : row.checked,
@@ -140,7 +142,8 @@ const InputDialog: React.FC = () => {
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
                   {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
                   {row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
-                  {row.type === 'date' && <DateField control={form.control} row={row} index={index} />}
+                  {row.type === 'date' ||
+                    (row.type === 'date-range' && <DateField control={form.control} row={row} index={index} />)}
                 </React.Fragment>
               );
             })}

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

@@ -1,7 +1,7 @@
 import { IDateInput } from '../../../../interfaces/dialog';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
-import { DatePicker } from '@mantine/dates';
+import { DatePicker, DateRangePicker } from '@mantine/dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
@@ -14,28 +14,55 @@ const DateField: React.FC<Props> = (props) => {
   const controller = useController({
     name: `test.${props.index}.value`,
     control: props.control,
-    defaultValue: props.row.default === true ? new Date() : props.row.default ? new Date(props.row.default) : undefined,
+    defaultValue:
+      props.row.default === true
+        ? new Date()
+        : Array.isArray(props.row.default)
+        ? props.row.default.map((date) => new Date(date))
+        : props.row.default && new Date(props.row.default),
     rules: { required: props.row.required },
   });
 
   return (
-    <DatePicker
+    <>
-      value={controller.field.value}
+      {props.row.type === 'date' ? (
-      name={controller.field.name}
+        <DatePicker
-      ref={controller.field.ref}
+          value={controller.field.value}
-      onBlur={controller.field.onBlur}
+          name={controller.field.name}
-      onChange={controller.field.onChange}
+          ref={controller.field.ref}
-      label={props.row.label}
+          onBlur={controller.field.onBlur}
-      description={props.row.description}
+          onChange={controller.field.onChange}
-      placeholder={props.row.placeholder}
+          label={props.row.label}
-      disabled={props.row.disabled}
+          description={props.row.description}
-      inputFormat="DD/MM/YYYY"
+          placeholder={props.row.placeholder}
-      withAsterisk={props.row.required}
+          disabled={props.row.disabled}
-      clearable={props.row.clearable}
+          inputFormat="DD/MM/YYYY"
-      icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          withAsterisk={props.row.required}
-      minDate={props.row.min ? new Date(props.row.min) : undefined}
+          clearable={props.row.clearable}
-      maxDate={props.row.max ? new Date(props.row.max) : undefined}
+          icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
-    />
+          minDate={props.row.min ? new Date(props.row.min) : undefined}
+          maxDate={props.row.max ? new Date(props.row.max) : undefined}
+        />
+      ) : (
+        <DateRangePicker
+          value={controller.field.value}
+          name={controller.field.name}
+          ref={controller.field.ref}
+          onBlur={controller.field.onBlur}
+          onChange={controller.field.onChange}
+          label={props.row.label}
+          description={props.row.description}
+          placeholder={props.row.placeholder}
+          disabled={props.row.disabled}
+          inputFormat="DD/MM/YYYY"
+          withAsterisk={props.row.required}
+          clearable={props.row.clearable}
+          icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          minDate={props.row.min ? new Date(props.row.min) : undefined}
+          maxDate={props.row.max ? new Date(props.row.max) : undefined}
+        />
+      )}
+    </>
   );
 };
 

web/src/interfaces/dialog.ts

@@ -69,9 +69,9 @@ export interface IColorInput {
 }
 
 export interface IDateInput {
-  type: 'date';
+  type: 'date' | 'date-range';
   label: string;
-  default?: string | true;
+  default?: string | [string, string] | true;
   disabled?: boolean;
   description?: string;
   required?: boolean;