Use new datepicker except when a range is needed

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

@@ -0,0 +1,10 @@
+<script>
+  import FlatpickrDatePicker from "./FlatpickrDatePicker.svelte"
+  import SpectrumDatePicker from "./SpectrumDatePicker.svelte"
+</script>
+
+<svelte:component
+  this={$$props.range ? FlatpickrDatePicker : SpectrumDatePicker}
+  {...$$props}
+  on:change
+/>

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

@@ -5,7 +5,7 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import "@spectrum-css/picker/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import { uuid } from "../../helpers"
+  import { uuid } from "../../../helpers"
 
   export let id = null
   export let disabled = false

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

@@ -7,7 +7,7 @@
   import { createEventDispatcher } from "svelte"
   import TimePicker from "./TimePicker.svelte"
   import Calendar from "./Calendar.svelte"
-  import DateTimeInput from "./DateTimeField.svelte"
+  import DateTimeInput from "./DateInput.svelte"
   import ActionButton from "../../../ActionButton/ActionButton.svelte"
 
   export let id = null

packages/bbui/src/Form/Core/index.js

@@ -8,7 +8,7 @@ export { default as CoreTextArea } from "./TextArea.svelte"
 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.svelte"
+export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"

packages/bbui/src/Form/DatePicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import Field from "./Field.svelte"
-  import DatePicker from "./Core/DatePicker.svelte"
+  import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
 
   export let value = null

packages/bbui/src/index.js

@@ -54,7 +54,7 @@ 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/DateTimePicker/DateTimePicker.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"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -68,6 +68,7 @@
       "jsonfield",
       "relationshipfield",
       "datetimefield",
+      "newdatetimefield",
       "multifieldselect",
       "s3upload",
       "codescanner",

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -10,8 +10,6 @@
     Notification,
     Body,
     Search,
-    DatePicker,
-    DateTimePicker,
   } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
@@ -204,47 +202,9 @@
       notifications.error("Error getting init info")
     }
   })
-
-  let foo = "2023-11-14T15:00:00"
 </script>
 
 <Page>
-  <div>
-    <h1>Date only</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime={false}
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Date time</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Date time no timezone</h1>
-    <div style="width: 240px;">
-      <DateTimePicker
-        enableTime
-        ignoreTimezones
-        value={foo}
-        on:change={e => (foo = e.detail)}
-      />
-    </div>
-    <h1>Time only</h1>
-    <div style="width: 240px;">
-      <DateTimePicker timeOnly value={foo} on:change={e => (foo = e.detail)} />
-    </div>
-    <br />
-    <br />
-    <br />
-    <DatePicker />
-  </div>
-
   <Layout noPadding gap="L">
     {#each Object.keys(automationErrors || {}) as appId}
       <Notification

packages/client/src/components/app/forms/NewDateTimeField.svelte

@@ -1,53 +0,0 @@
-<script>
-  import { CoreDatePicker } from "@budibase/bbui"
-  import Field from "./Field.svelte"
-
-  export let field
-  export let label
-  export let placeholder
-  export let disabled = false
-  export let enableTime = true
-  export let timeOnly = false
-  export let time24hr = false
-  export let ignoreTimezones = false
-  export let validation
-  export let defaultValue
-  export let onChange
-
-  let fieldState
-  let fieldApi
-
-  const handleChange = e => {
-    const changed = fieldApi.setValue(e.detail)
-    if (onChange && changed) {
-      onChange({ value: e.detail })
-    }
-  }
-</script>
-
-<Field
-  {label}
-  {field}
-  {disabled}
-  {validation}
-  {defaultValue}
-  type="datetime"
-  bind:fieldState
-  bind:fieldApi
->
-  {#if fieldState}
-    <CoreDatePicker
-      value={fieldState.value}
-      on:change={handleChange}
-      disabled={fieldState.disabled}
-      error={fieldState.error}
-      id={fieldState.fieldId}
-      appendTo={document.getElementById("flatpickr-root")}
-      {enableTime}
-      {timeOnly}
-      {time24hr}
-      {ignoreTimezones}
-      {placeholder}
-    />
-  {/if}
-</Field>