diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index 8666faf..ba85991 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -62,10 +62,10 @@ const InputDialog: React.FC = () => {
               ? row.type === 'date' || row.type === 'date-range'
                 ? // Set date to current one if default is set to true
                   row.default === true
-                  ? new Date()
+                  ? new Date().getTime()
                   : Array.isArray(row.default)
-                  ? row.default.map((date) => new Date(date))
-                  : row.default && new Date(row.default)
+                  ? row.default.map((date) => new Date(date).getTime())
+                  : row.default && new Date(row.default).getTime()
                 : row.default
               : row.checked,
         } || { value: null }
@@ -142,8 +142,9 @@ 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' ||
-                    (row.type === 'date-range' && <DateField control={form.control} row={row} index={index} />)}
+                  {row.type === 'date' || row.type === 'date-range' ? (
+                    <DateField control={form.control} row={row} index={index} />
+                  ) : null}
                 </React.Fragment>
               );
             })}
diff --git a/web/src/features/dialog/components/fields/date.tsx b/web/src/features/dialog/components/fields/date.tsx
index 0a3ea74..0385f01 100644
--- a/web/src/features/dialog/components/fields/date.tsx
+++ b/web/src/features/dialog/components/fields/date.tsx
@@ -14,12 +14,6 @@ const DateField: React.FC<Props> = (props) => {
   const controller = useController({
     name: `test.${props.index}.value`,
     control: props.control,
-    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 },
   });
 
@@ -27,11 +21,12 @@ const DateField: React.FC<Props> = (props) => {
     <>
       {props.row.type === 'date' ? (
         <DatePicker
-          value={controller.field.value}
+          value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
           name={controller.field.name}
           ref={controller.field.ref}
           onBlur={controller.field.onBlur}
-          onChange={controller.field.onChange}
+          // Workaround to use timestamp instead of Date object in values
+          onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
           label={props.row.label}
           description={props.row.description}
           placeholder={props.row.placeholder}
@@ -44,23 +39,33 @@ const DateField: React.FC<Props> = (props) => {
           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}
-        />
+        props.row.type === 'date-range' && (
+          <DateRangePicker
+            value={
+              controller.field.value
+                ? controller.field.value[0]
+                  ? controller.field.value.map((date: Date) => new Date(date))
+                  : controller.field.value
+                : controller.field.value
+            }
+            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)))
+            }
+            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}
+          />
+        )
       )}
     </>
   );