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..bb1be87314 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -1,7 +1,6 @@
 <script>
   import Field from "./Field.svelte"
   import DatePicker from "./Core/DatePicker.svelte"
-  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let label = null
@@ -11,13 +10,6 @@
   export let enableTime = true
   export let placeholder = null
   export let appendTo = undefined
-
-  const dispatch = createEventDispatcher()
-  const onChange = e => {
-    const isoString = e.detail.toISOString()
-    value = isoString
-    dispatch("change", isoString)
-  }
 </script>
 
 <Field {label} {labelPosition} {error}>
@@ -28,6 +20,6 @@
     {placeholder}
     {enableTime}
     {appendTo}
-    on:change={onChange}
+    on:change
   />
 </Field>