From 27056990aa4f07e776bda257a9fe9eadf79d8f2f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 9 Apr 2024 11:52:32 +0100
Subject: [PATCH] Add very early work on date range picker

---
 .../Form/Core/DatePicker/DatePicker.svelte    | 186 +++++++++++-
 .../DatePicker/FlatpickrDatePicker.svelte     | 268 ------------------
 .../Core/DatePicker/SpectrumDatePicker.svelte | 183 ------------
 .../bbui/src/Form/Core/DateRangePicker.svelte |  69 +++++
 packages/bbui/src/Form/Core/index.js          |   1 +
 packages/bbui/src/Form/DatePicker.svelte      |  11 +-
 packages/bbui/src/Form/DateRangePicker.svelte |  34 +++
 packages/bbui/src/index.js                    |  50 ++--
 .../settings/backups/index.svelte             |  12 +-
 9 files changed, 313 insertions(+), 501 deletions(-)
 delete mode 100644 packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
 delete mode 100644 packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
 create mode 100644 packages/bbui/src/Form/Core/DateRangePicker.svelte
 create mode 100644 packages/bbui/src/Form/DateRangePicker.svelte

diff --git a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
index a03be24753..194bed7f9a 100644
--- a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte
@@ -1,15 +1,183 @@
 <script>
-  import FlatpickrDatePicker from "./FlatpickrDatePicker.svelte"
-  import SpectrumDatePicker from "./SpectrumDatePicker.svelte"
+  import "@spectrum-css/calendar/dist/index-vars.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import Popover from "../../../Popover/Popover.svelte"
+  import dayjs from "dayjs"
+  import { createEventDispatcher, onMount } from "svelte"
+  import TimePicker from "./TimePicker.svelte"
+  import Calendar from "./Calendar.svelte"
+  import DateTimeInput from "./DateInput.svelte"
+  import ActionButton from "../../../ActionButton/ActionButton.svelte"
+  import { parseDate } from "../../../helpers"
 
-  export let api
+  export let id = null
+  export let disabled = false
+  export let error = null
+  export let enableTime = true
+  export let value = null
+  export let placeholder = null
+  export let timeOnly = false
+  export let ignoreTimezones = false
+  export let useKeyboardShortcuts = true
+  export let appendTo = null
+  export let api = null
+  export let align = "left"
+
+  const dispatch = createEventDispatcher()
+
+  let isOpen = false
+  let anchor
+  let popover
+  let calendar
+
+  $: parsedValue = parseDate(value, { timeOnly, dateOnly: !enableTime })
+  $: showCalendar = !timeOnly
+  $: showTime = enableTime || timeOnly
+
+  const clearDateOnBackspace = event => {
+    // Ignore if we're typing a value
+    if (document.activeElement?.tagName.toLowerCase() === "input") {
+      return
+    }
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      handleChange(null)
+      popover?.hide()
+    }
+  }
+
+  const onOpen = () => {
+    isOpen = true
+    if (useKeyboardShortcuts) {
+      document.addEventListener("keyup", clearDateOnBackspace)
+    }
+  }
+
+  const onClose = () => {
+    isOpen = false
+    if (useKeyboardShortcuts) {
+      document.removeEventListener("keyup", clearDateOnBackspace)
+    }
+  }
+
+  const handleChange = date => {
+    if (!date) {
+      dispatch("change", null)
+      return
+    }
+    let newValue = date.toISOString()
+
+    // If time only set date component to 2000-01-01
+    if (timeOnly) {
+      newValue = `2000-01-01T${newValue.split("T")[1]}`
+    }
+
+    // For date-only fields, construct a manual timestamp string without a time
+    // or time zone
+    else if (!enableTime) {
+      const year = date.year()
+      const month = `${date.month() + 1}`.padStart(2, "0")
+      const day = `${date.date()}`.padStart(2, "0")
+      newValue = `${year}-${month}-${day}T00:00:00.000`
+    }
+
+    // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
+    // time picked, without timezone
+    else if (enableTime && ignoreTimezones) {
+      const offset = new Date().getTimezoneOffset() * 60000
+      newValue = new Date(date.valueOf() - offset).toISOString().slice(0, -1)
+    }
+
+    dispatch("change", newValue)
+  }
+
+  const setToNow = () => {
+    const now = dayjs()
+    calendar?.setDate(now)
+    handleChange(now)
+  }
+
+  onMount(() => {
+    api = {
+      open: () => popover?.show(),
+      close: () => popover?.hide(),
+    }
+  })
 </script>
 
-<svelte:component
-  this={$$props.range ? FlatpickrDatePicker : SpectrumDatePicker}
-  {...$$props}
-  on:change
+<DateTimeInput
+  bind:anchor
+  {disabled}
+  {error}
+  {placeholder}
+  {id}
+  {enableTime}
+  {timeOnly}
+  focused={isOpen}
+  value={parsedValue}
+  on:click={popover?.show}
+  icon={timeOnly ? "Clock" : "Calendar"}
+/>
+
+<Popover
+  bind:this={popover}
   on:open
   on:close
-  bind:api
-/>
+  on:open={onOpen}
+  on:close={onClose}
+  {anchor}
+  portalTarget={appendTo}
+  {align}
+>
+  {#if isOpen}
+    <div class="date-time-popover">
+      {#if showCalendar}
+        <Calendar
+          value={parsedValue}
+          onChange={handleChange}
+          bind:this={calendar}
+        />
+      {/if}
+      <div class="footer" class:spaced={showCalendar}>
+        {#if showTime}
+          <TimePicker value={parsedValue} onChange={handleChange} />
+        {/if}
+        <div class="actions">
+          <ActionButton
+            disabled={!value}
+            size="S"
+            on:click={() => handleChange(null)}
+          >
+            Clear
+          </ActionButton>
+          <ActionButton size="S" on:click={setToNow}>
+            {showTime ? "Now" : "Today"}
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  {/if}
+</Popover>
+
+<style>
+  .date-time-popover {
+    padding: 8px;
+    overflow: hidden;
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 60px;
+  }
+  .footer.spaced {
+    padding-top: 14px;
+  }
+  .actions {
+    padding: 4px 0;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
deleted file mode 100644
index ac163de3bb..0000000000
--- a/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte
+++ /dev/null
@@ -1,268 +0,0 @@
-<script>
-  import Flatpickr from "svelte-flatpickr"
-  import "flatpickr/dist/flatpickr.css"
-  import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/textfield/dist/index-vars.css"
-  import "@spectrum-css/picker/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
-  import { uuid } from "../../../helpers"
-
-  export let id = null
-  export let disabled = false
-  export let readonly = false
-  export let enableTime = true
-  export let value = null
-  export let placeholder = null
-  export let appendTo = undefined
-  export let timeOnly = false
-  export let ignoreTimezones = false
-  export let time24hr = false
-  export let range = false
-  export let flatpickr
-  export let useKeyboardShortcuts = true
-
-  const dispatch = createEventDispatcher()
-  const flatpickrId = `${uuid()}-wrapper`
-
-  let open = false
-  let flatpickrOptions
-
-  // Another classic flatpickr issue. Errors were randomly being thrown due to
-  // flatpickr internal code. Making sure that "destroy" is a valid function
-  // fixes it. The sooner we remove flatpickr the better.
-  $: {
-    if (flatpickr && !flatpickr.destroy) {
-      flatpickr.destroy = () => {}
-    }
-  }
-
-  const resolveTimeStamp = timestamp => {
-    let maskedDate = new Date(`0-${timestamp}`)
-
-    if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
-      return maskedDate
-    } else {
-      return null
-    }
-  }
-
-  $: flatpickrOptions = {
-    element: `#${flatpickrId}`,
-    enableTime: timeOnly || enableTime || false,
-    noCalendar: timeOnly || false,
-    altInput: true,
-    time_24hr: time24hr || false,
-    altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
-    wrap: true,
-    mode: range ? "range" : "single",
-    appendTo,
-    disableMobile: "true",
-    onReady: () => {
-      let timestamp = resolveTimeStamp(value)
-      if (timeOnly && timestamp) {
-        dispatch("change", timestamp.toISOString())
-      }
-    },
-    onOpen: () => dispatch("open"),
-    onClose: () => dispatch("close"),
-  }
-
-  $: redrawOptions = {
-    timeOnly,
-    enableTime,
-    time24hr,
-    disabled,
-  }
-
-  const handleChange = event => {
-    const [dates] = event.detail
-    const noTimezone = enableTime && !timeOnly && ignoreTimezones
-    let newValue = dates[0]
-    if (newValue) {
-      newValue = newValue.toISOString()
-    }
-    // If time only set date component to 2000-01-01
-    if (timeOnly) {
-      newValue = `2000-01-01T${newValue.split("T")[1]}`
-    }
-
-    // For date-only fields, construct a manual timestamp string without a time
-    // or time zone
-    else if (!enableTime) {
-      const year = dates[0].getFullYear()
-      const month = `${dates[0].getMonth() + 1}`.padStart(2, "0")
-      const day = `${dates[0].getDate()}`.padStart(2, "0")
-      newValue = `${year}-${month}-${day}T00:00:00.000`
-    }
-
-    // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
-    // time picked, without timezone
-    else if (noTimezone) {
-      const offset = dates[0].getTimezoneOffset() * 60000
-      newValue = new Date(dates[0].getTime() - offset)
-        .toISOString()
-        .slice(0, -1)
-    }
-
-    if (range) {
-      dispatch("change", event.detail)
-    } else {
-      dispatch("change", newValue)
-    }
-  }
-
-  const clearDateOnBackspace = event => {
-    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
-      dispatch("change", "")
-      flatpickr.close()
-    }
-  }
-
-  const onOpen = () => {
-    open = true
-    if (useKeyboardShortcuts) {
-      document.addEventListener("keyup", clearDateOnBackspace)
-    }
-  }
-
-  const onClose = () => {
-    open = false
-    if (useKeyboardShortcuts) {
-      document.removeEventListener("keyup", clearDateOnBackspace)
-    }
-
-    // Manually blur all input fields since flatpickr creates a second
-    // duplicate input field.
-    // We need to blur both because the focus styling does not get properly
-    // applied.
-    const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach(el => el.blur())
-  }
-
-  const parseDate = val => {
-    if (!val) {
-      return null
-    }
-    let date
-    let time
-
-    // it is a string like 00:00:00, just time
-    let ts = resolveTimeStamp(val)
-
-    if (timeOnly && ts) {
-      date = ts
-    } else 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))
-    }
-
-    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>
-
-{#key redrawOptions}
-  <Flatpickr
-    bind:flatpickr
-    value={range ? value : parseDate(value)}
-    on:open={onOpen}
-    on:close={onClose}
-    options={flatpickrOptions}
-    on:change={handleChange}
-    element={`#${flatpickrId}`}
-  >
-    <div
-      id={flatpickrId}
-      class:is-disabled={disabled || readonly}
-      class="flatpickr spectrum-InputGroup spectrum-Datepicker"
-      class:is-focused={open}
-      aria-readonly="false"
-      aria-required="false"
-      aria-haspopup="true"
-    >
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        on:click={flatpickr?.open}
-        class="spectrum-Textfield spectrum-InputGroup-textfield"
-        class:is-disabled={disabled}
-      >
-        <input
-          {disabled}
-          {readonly}
-          data-input
-          type="text"
-          class="spectrum-Textfield-input spectrum-InputGroup-input"
-          class:is-disabled={disabled}
-          {placeholder}
-          {id}
-          {value}
-        />
-      </div>
-      <button
-        type="button"
-        class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
-        tabindex="-1"
-        class:is-disabled={disabled}
-        on:click={flatpickr?.open}
-      >
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM"
-          focusable="false"
-          aria-hidden="true"
-          aria-label="Calendar"
-        >
-          <use xlink:href="#spectrum-icon-18-Calendar" />
-        </svg>
-      </button>
-    </div>
-  </Flatpickr>
-{/key}
-{#if open}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="overlay" on:mousedown|self={flatpickr?.close} />
-{/if}
-
-<style>
-  .spectrum-Textfield-input {
-    pointer-events: none;
-  }
-  .spectrum-Textfield:not(.is-disabled):hover {
-    cursor: pointer;
-  }
-  .flatpickr {
-    width: 100%;
-    overflow: hidden;
-  }
-  .flatpickr .spectrum-Textfield {
-    width: 100%;
-  }
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 999;
-    max-height: 100%;
-  }
-  :global(.flatpickr-calendar) {
-    font-family: var(--font-sans);
-  }
-  .is-disabled {
-    pointer-events: none !important;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
deleted file mode 100644
index bd9fb8269e..0000000000
--- a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte
+++ /dev/null
@@ -1,183 +0,0 @@
-<script>
-  import "@spectrum-css/calendar/dist/index-vars.css"
-  import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/textfield/dist/index-vars.css"
-  import Popover from "../../../Popover/Popover.svelte"
-  import dayjs from "dayjs"
-  import { createEventDispatcher, onMount } from "svelte"
-  import TimePicker from "./TimePicker.svelte"
-  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
-  export let error = null
-  export let enableTime = true
-  export let value = null
-  export let placeholder = null
-  export let timeOnly = false
-  export let ignoreTimezones = false
-  export let useKeyboardShortcuts = true
-  export let appendTo = null
-  export let api = null
-  export let align = "left"
-
-  const dispatch = createEventDispatcher()
-
-  let isOpen = false
-  let anchor
-  let popover
-  let calendar
-
-  $: parsedValue = parseDate(value)
-  $: showCalendar = !timeOnly
-  $: showTime = enableTime || timeOnly
-
-  const clearDateOnBackspace = event => {
-    // Ignore if we're typing a value
-    if (document.activeElement?.tagName.toLowerCase() === "input") {
-      return
-    }
-    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
-      handleChange(null)
-      popover?.hide()
-    }
-  }
-
-  const onOpen = () => {
-    isOpen = true
-    if (useKeyboardShortcuts) {
-      document.addEventListener("keyup", clearDateOnBackspace)
-    }
-  }
-
-  const onClose = () => {
-    isOpen = false
-    if (useKeyboardShortcuts) {
-      document.removeEventListener("keyup", clearDateOnBackspace)
-    }
-  }
-
-  const handleChange = date => {
-    if (!date) {
-      dispatch("change", null)
-      return
-    }
-    let newValue = date.toISOString()
-
-    // If time only set date component to 2000-01-01
-    if (timeOnly) {
-      newValue = `2000-01-01T${newValue.split("T")[1]}`
-    }
-
-    // For date-only fields, construct a manual timestamp string without a time
-    // or time zone
-    else if (!enableTime) {
-      const year = date.year()
-      const month = `${date.month() + 1}`.padStart(2, "0")
-      const day = `${date.date()}`.padStart(2, "0")
-      newValue = `${year}-${month}-${day}T00:00:00.000`
-    }
-
-    // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
-    // time picked, without timezone
-    else if (enableTime && ignoreTimezones) {
-      const offset = new Date().getTimezoneOffset() * 60000
-      newValue = new Date(date.valueOf() - offset).toISOString().slice(0, -1)
-    }
-
-    dispatch("change", newValue)
-  }
-
-  const setToNow = () => {
-    const now = dayjs()
-    calendar?.setDate(now)
-    handleChange(now)
-  }
-
-  onMount(() => {
-    api = {
-      open: () => popover?.show(),
-      close: () => popover?.hide(),
-    }
-  })
-</script>
-
-<DateTimeInput
-  bind:anchor
-  {disabled}
-  {error}
-  {placeholder}
-  {id}
-  {enableTime}
-  {timeOnly}
-  focused={isOpen}
-  value={parsedValue}
-  on:click={popover?.show}
-  icon={timeOnly ? "Clock" : "Calendar"}
-/>
-
-<Popover
-  bind:this={popover}
-  on:open
-  on:close
-  on:open={onOpen}
-  on:close={onClose}
-  {anchor}
-  portalTarget={appendTo}
-  {align}
->
-  {#if isOpen}
-    <div class="date-time-popover">
-      {#if showCalendar}
-        <Calendar
-          value={parsedValue}
-          onChange={handleChange}
-          bind:this={calendar}
-        />
-      {/if}
-      <div class="footer" class:spaced={showCalendar}>
-        {#if showTime}
-          <TimePicker value={parsedValue} onChange={handleChange} />
-        {/if}
-        <div class="actions">
-          <ActionButton
-            disabled={!value}
-            size="S"
-            on:click={() => handleChange(null)}
-          >
-            Clear
-          </ActionButton>
-          <ActionButton size="S" on:click={setToNow}>
-            {showTime ? "Now" : "Today"}
-          </ActionButton>
-        </div>
-      </div>
-    </div>
-  {/if}
-</Popover>
-
-<style>
-  .date-time-popover {
-    padding: 8px;
-    overflow: hidden;
-  }
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 60px;
-  }
-  .footer.spaced {
-    padding-top: 14px;
-  }
-  .actions {
-    padding: 4px 0;
-    flex: 1 1 auto;
-    display: flex;
-    justify-content: flex-end;
-    gap: 6px;
-  }
-</style>
diff --git a/packages/bbui/src/Form/Core/DateRangePicker.svelte b/packages/bbui/src/Form/Core/DateRangePicker.svelte
new file mode 100644
index 0000000000..9084942ba7
--- /dev/null
+++ b/packages/bbui/src/Form/Core/DateRangePicker.svelte
@@ -0,0 +1,69 @@
+<script>
+  import CoreDatePicker from "./DatePicker/DatePicker.svelte"
+  import Icon from "../../Icon/Icon.svelte"
+
+  export let value = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let appendTo = undefined
+  export let ignoreTimezones = false
+
+  let fromDate
+  let toDate
+</script>
+
+<div class="date-range">
+  <CoreDatePicker
+    value={fromDate}
+    on:change={e => (fromDate = e.detail)}
+    enableTime={false}
+  />
+  <div class="arrow">
+    <Icon name="ChevronRight" />
+  </div>
+  <CoreDatePicker
+    value={toDate}
+    on:change={e => (toDate = e.detail)}
+    enableTime={false}
+  />
+</div>
+
+<style>
+  .date-range {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid var(--spectrum-alias-border-color);
+    border-radius: 4px;
+  }
+  .date-range :global(.spectrum-InputGroup),
+  .date-range :global(.spectrum-Textfield),
+  .date-range :global(input) {
+    min-width: 0 !important;
+    width: 150px !important;
+  }
+  .date-range :global(input) {
+    border: none;
+    text-align: center;
+  }
+  .date-range :global(button) {
+    display: none;
+  }
+  .date-range :global(> :first-child input),
+  .date-range :global(> :first-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .date-range :global(> :last-child input),
+  .date-range :global(> :last-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: 1;
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 4af2507147..533a1956c5 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -9,6 +9,7 @@ export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte"
+export { default as CoreDateRangePicker } from "./DateRangePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 5e84947f0a..cf249e5bb8 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -15,18 +15,12 @@
   export let placeholder = null
   export let appendTo = undefined
   export let ignoreTimezones = false
-  export let range = false
   export let helpText = null
+
   const dispatch = createEventDispatcher()
 
   const onChange = e => {
-    if (range) {
-      // Flatpickr cant take two dates and work out what to display, needs to be provided a string.
-      // Like - "Date1 to Date2". Hence passing in that specifically from the array
-      value = e?.detail[1]
-    } else {
-      value = e.detail
-    }
+    value = e.detail
     dispatch("change", e.detail)
   }
 </script>
@@ -43,7 +37,6 @@
     {time24hr}
     {appendTo}
     {ignoreTimezones}
-    {range}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Form/DateRangePicker.svelte b/packages/bbui/src/Form/DateRangePicker.svelte
new file mode 100644
index 0000000000..39c2acb96a
--- /dev/null
+++ b/packages/bbui/src/Form/DateRangePicker.svelte
@@ -0,0 +1,34 @@
+<script>
+  import Field from "./Field.svelte"
+  import DateRangePicker from "./Core/DateRangePicker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let helpText = null
+  export let appendTo = undefined
+  export let ignoreTimezones = false
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {helpText} {label} {labelPosition} {error}>
+  <DateRangePicker
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {appendTo}
+    {ignoreTimezones}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 222e558675..f28e185305 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -3,13 +3,34 @@ import "./bbui.css"
 // Spectrum icons
 import "@spectrum-css/icon/dist/index-vars.css"
 
-// Components
+// Form components
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
 export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
 export { default as Dropzone } from "./Form/Dropzone.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
+export { default as DateRangePicker } from "./Form/DateRangePicker.svelte"
+export { default as Toggle } from "./Form/Toggle.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
+export { default as Checkbox } from "./Form/Checkbox.svelte"
+export { default as InputDropdown } from "./Form/InputDropdown.svelte"
+export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
+export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
+export { default as Multiselect } from "./Form/Multiselect.svelte"
+export { default as Search } from "./Form/Search.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
+export { default as File } from "./Form/File.svelte"
+
+// Core form components to be used elsewhere (standard components)
+export * from "./Form/Core"
+
+// Fancy form components
+export * from "./FancyForm"
+
+// Components
 export { default as Drawer } from "./Drawer/Drawer.svelte"
 export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
@@ -21,12 +42,6 @@ export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
-export { default as Toggle } from "./Form/Toggle.svelte"
-export { default as RadioGroup } from "./Form/RadioGroup.svelte"
-export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as InputDropdown } from "./Form/InputDropdown.svelte"
-export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
-export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
@@ -37,11 +52,6 @@ export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
-export {
-  default as AbsTooltip,
-  TooltipPosition,
-  TooltipType,
-} from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
@@ -53,9 +63,6 @@ export { default as NotificationDisplay } from "./Notification/NotificationDispl
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
-export { default as DatePicker } from "./Form/DatePicker.svelte"
-export { default as DateTimePicker } from "./Form/Core/DatePicker/SpectrumDatePicker.svelte"
-export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"
@@ -65,7 +72,6 @@ export { default as Tag } from "./Tags/Tag.svelte"
 export { default as TreeView } from "./TreeView/Tree.svelte"
 export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
-export { default as Search } from "./Form/Search.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
@@ -77,15 +83,15 @@ export { default as CopyInput } from "./Input/CopyInput.svelte"
 export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
-export { default as RichTextField } from "./Form/RichTextField.svelte"
 export { default as List } from "./List/List.svelte"
 export { default as ListItem } from "./List/ListItem.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
-export { default as Slider } from "./Form/Slider.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
-export { default as File } from "./Form/File.svelte"
 export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte"
+export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
+export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
+
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
 export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
@@ -97,9 +103,6 @@ export { default as Heading } from "./Typography/Heading.svelte"
 export { default as Detail } from "./Typography/Detail.svelte"
 export { default as Code } from "./Typography/Code.svelte"
 
-// Core form components to be used elsewhere (standard components)
-export * from "./Form/Core"
-
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
 export { default as positionDropdown } from "./Actions/position_dropdown"
@@ -111,6 +114,3 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"
-
-// Fancy form components
-export * from "./FancyForm"
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
index bbf28b2fe8..212243aa76 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import {
     Button,
-    DatePicker,
+    DateRangePicker,
     Divider,
     Layout,
     notifications,
@@ -236,14 +236,12 @@
               bind:value={filterOpt}
             />
           </div>
-          <DatePicker
-            range={true}
+          <DateRangePicker
+            value={[startDate, endDate]}
             label="Date Range"
             on:change={e => {
-              if (e.detail[0].length > 1) {
-                startDate = e.detail[0][0].toISOString()
-                endDate = e.detail[0][1].toISOString()
-              }
+              startDate = e.detail?.[0]
+              endDate = e.detail?.[1]
             }}
           />
         </div>