diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 176db9f497..71126a5b13 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -31,7 +31,11 @@
 
   const handleChange = event => {
     const [dates] = event.detail
-    dispatch("change", dates[0])
+    let newValue = dates[0]
+    if (newValue) {
+      newValue = newValue.toISOString()
+    }
+    dispatch("change", newValue)
   }
 
   const clearDateOnBackspace = event => {
@@ -57,11 +61,38 @@
     const els = document.querySelectorAll(`#${flatpickrId} input`)
     els.forEach(el => el.blur())
   }
+
+  const parseDate = val => {
+    if (!val) {
+      return null
+    }
+    let date
+    if (val instanceof Date) {
+      // Use real date obj if already parsed
+      date = val
+    } else if (isNaN(val)) {
+      // Treat as date string of some sort
+      date = new Date(val)
+    } else {
+      // Treat as numerical timestamp
+      date = new Date(parseInt(val))
+    }
+    const time = date.getTime()
+    if (isNaN(time)) {
+      return null
+    }
+    // By rounding to the nearest second we avoid locking up in an endless
+    // loop in the builder, caused by potentially enriching {{ now }} to every
+    // millisecond.
+    return new Date(Math.floor(time / 1000) * 1000)
+  }
+
+  $: console.log(value)
 </script>
 
 <Flatpickr
   bind:flatpickr
-  {value}
+  value={parseDate(value)}
   on:open={onOpen}
   on:close={onClose}
   options={flatpickrOptions}
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 041054e406..7d5656a22d 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -13,10 +13,10 @@
   export let appendTo = undefined
 
   const dispatch = createEventDispatcher()
+
   const onChange = e => {
-    const isoString = e.detail.toISOString()
-    value = isoString
-    dispatch("change", isoString)
+    value = e.detail
+    dispatch("change", e.detail)
   }
 </script>
 
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 466f7eafd5..515b6adc77 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -12,31 +12,6 @@
 
   let fieldState
   let fieldApi
-
-  const parseDate = val => {
-    if (!val) {
-      return null
-    }
-    let date
-    if (val instanceof Date) {
-      // Use real date obj if already parsed
-      date = val
-    } else if (isNaN(val)) {
-      // Treat as date string of some sort
-      date = new Date(val)
-    } else {
-      // Treat as numerical timestamp
-      date = new Date(parseInt(val))
-    }
-    const time = date.getTime()
-    if (isNaN(time)) {
-      return null
-    }
-    // By rounding to the nearest second we avoid locking up in an endless
-    // loop in the builder, caused by potentially enriching {{ now }} to every
-    // millisecond.
-    return new Date(Math.floor(time / 1000) * 1000)
-  }
 </script>
 
 <Field
@@ -44,7 +19,7 @@
   {field}
   {disabled}
   {validation}
-  defaultValue={parseDate(defaultValue)}
+  {defaultValue}
   type="datetime"
   bind:fieldState
   bind:fieldApi