Break out core date parsing utils to share between packages

packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte

@@ -9,6 +9,7 @@
   import Calendar from "./Calendar.svelte"
   import DateTimeInput from "./DateInput.svelte"
   import ActionButton from "../../../ActionButton/ActionButton.svelte"
+  import { parseDate } from "../../../helpers"
 
   export let id = null
   export let disabled = false
@@ -30,7 +31,7 @@
   let popover
   let calendar
 
-  $: parsedValue = parseValue(value)
+  $: parsedValue = parseDate(value)
   $: showCalendar = !timeOnly
   $: showTime = enableTime || timeOnly
 
@@ -59,28 +60,6 @@
     }
   }
 
-  const parseValue = value => {
-    let parsedDate
-
-    // Attempt to parse as a time-only string if required
-    if (typeof value === "string" && timeOnly) {
-      parsedDate = dayjs(`0-${value}`)
-    }
-
-    // Attempt to parse as normal if required
-    if (!parsedDate?.isValid()) {
-      parsedDate = dayjs(value)
-    }
-    if (!parsedDate?.isValid()) {
-      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 dayjs(Math.floor(parsedDate.valueOf() / 1000) * 1000)
-  }
-
   const handleChange = date => {
     if (!date) {
       dispatch("change", null)

packages/bbui/src/helpers.js

@@ -1,4 +1,5 @@
 import { helpers } from "@budibase/shared-core"
+import dayjs from "dayjs"
 
 export const deepGet = helpers.deepGet
 
@@ -115,3 +116,33 @@ export const copyToClipboard = value => {
     }
   })
 }
+
+export const parseDate = (value, { timeOnly, dateOnly } = {}) => {
+  // If empty then invalid
+  if (!value) {
+    return null
+  }
+
+  // Certain string values need transformed
+  if (typeof value !== "string") {
+    if (timeOnly || !isNaN(new Date(`0-${value}`))) {
+      value = `0-${value}`
+    }
+
+    // If date only, check for cases where we received a UTC string
+    else if (dateOnly && value.endsWith("Z")) {
+      value = value.split("Z")[0]
+    }
+  }
+
+  // Parse value and check for validity
+  const parsedDate = dayjs(value)
+  if (!parsedDate.isValid()) {
+    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 dayjs(Math.floor(parsedDate.valueOf() / 1000) * 1000)
+}

packages/frontend-core/src/components/grid/cells/DateCell.svelte

@@ -1,6 +1,5 @@
 <script>
-  import dayjs from "dayjs"
-  import { CoreDatePicker, Icon } from "@budibase/bbui"
+  import { CoreDatePicker, Icon, Helpers } from "@budibase/bbui"
   import { onMount } from "svelte"
 
   export let value
@@ -13,10 +12,7 @@
   let datePickerAPI
   let isOpen
 
-  // Adding the 0- will turn a string like 00:00:00 into a valid ISO
-  // date, but will make actual ISO dates invalid
-  $: isTimeValue = !isNaN(new Date(`0-${value}`))
-  $: timeOnly = isTimeValue || schema?.timeOnly
+  $: timeOnly = schema?.timeOnly
   $: dateOnly = schema?.dateOnly
   $: format = timeOnly
     ? "HH:mm:ss"
@@ -24,18 +20,11 @@
     ? "MMM D YYYY"
     : "MMM D YYYY, HH:mm"
   $: editable = focused && !readonly
-  $: displayValue = getDisplayValue(value, format, timeOnly, isTimeValue)
+  $: displayValue = getDisplayValue(value, timeOnly, dateOnly, format)
 
-  const getDisplayValue = (value, format, timeOnly, isTimeValue) => {
-    if (!value) {
-      return ""
-    }
-    // Parse full date strings
-    if (!timeOnly || !isTimeValue) {
-      return dayjs(value).format(format)
-    }
-    // Otherwise must be a time string
-    return dayjs(`0-${value}`).format(format)
+  const getDisplayValue = (value, timeOnly, dateOnly, format) => {
+    const parsedDate = Helpers.parseDate(value, { timeOnly, dateOnly })
+    return parsedDate?.format(format) || ""
   }
 
   // Ensure we close flatpickr when unselected