Fix for #3758 - updating the datetime cell renderer and form component to be capable of display time only formats, as well as adding an option to only select the time component for a date time form field.

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

@@ -14,16 +14,20 @@
   export let value = null
   export let placeholder = null
   export let appendTo = undefined
+  export let timeOnly = false
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${generateID()}-wrapper`
   let open = false
-  let flatpickr
+  let flatpickr, flatpickrOptions, isTimeOnly
+
+  $: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
   $: flatpickrOptions = {
     element: `#${flatpickrId}`,
-    enableTime: enableTime || false,
+    enableTime: isTimeOnly || enableTime || false,
+    noCalendar: isTimeOnly || false,
     altInput: true,
-    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
+    altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
     appendTo,
     disableMobile: "true",
@@ -35,6 +39,11 @@
     if (newValue) {
       newValue = newValue.toISOString()
     }
+    // if time only set date component to today
+    if (timeOnly) {
+      const todayDate = new Date().toISOString().split("T")[0]
+      newValue = `${todayDate}T${newValue.split("T")[1]}`
+    }
     dispatch("change", newValue)
   }
 
@@ -67,7 +76,11 @@
       return null
     }
     let date
-    if (val instanceof Date) {
+    let time = new Date(`0-${val}`)
+    // it is a string like 00:00:00, just time
+    if (timeOnly || (typeof val === "string" && !isNaN(time))) {
+      date = time
+    } else if (val instanceof Date) {
       // Use real date obj if already parsed
       date = val
     } else if (isNaN(val)) {
@@ -77,7 +90,7 @@
       // Treat as numerical timestamp
       date = new Date(parseInt(val))
     }
-    const time = date.getTime()
+    time = date.getTime()
     if (isNaN(time)) {
       return null
     }
@@ -88,69 +101,71 @@
   }
 </script>
 
-<Flatpickr
+{#key isTimeOnly}
-  bind:flatpickr
+  <Flatpickr
-  value={parseDate(value)}
+    bind:flatpickr
-  on:open={onOpen}
+    value={parseDate(value)}
-  on:close={onClose}
+    on:open={onOpen}
-  options={flatpickrOptions}
+    on:close={onClose}
-  on:change={handleChange}
+    options={flatpickrOptions}
-  element={`#${flatpickrId}`}
+    on:change={handleChange}
->
+    element={`#${flatpickrId}`}
-  <div
-    id={flatpickrId}
-    class:is-disabled={disabled}
-    class:is-invalid={!!error}
-    class="flatpickr spectrum-InputGroup spectrum-Datepicker"
-    class:is-focused={open}
-    aria-readonly="false"
-    aria-required="false"
-    aria-haspopup="true"
   >
     <div
-      on:click={flatpickr?.open}
+      id={flatpickrId}
-      class="spectrum-Textfield spectrum-InputGroup-textfield"
       class:is-disabled={disabled}
       class:is-invalid={!!error}
+      class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+      class:is-focused={open}
+      aria-readonly="false"
+      aria-required="false"
+      aria-haspopup="true"
     >
-      {#if !!error}
+      <div
+        on:click={flatpickr?.open}
+        class="spectrum-Textfield spectrum-InputGroup-textfield"
+        class:is-disabled={disabled}
+        class:is-invalid={!!error}
+      >
+        {#if !!error}
+          <svg
+            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        {/if}
+        <input
+          data-input
+          type="text"
+          {disabled}
+          class="spectrum-Textfield-input spectrum-InputGroup-input"
+          {placeholder}
+          {id}
+          {value}
+        />
+      </div>
+      <button
+        type="button"
+        class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+        tabindex="-1"
+        {disabled}
+        class:is-invalid={!!error}
+        on:click={flatpickr?.open}
+      >
         <svg
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+          class="spectrum-Icon spectrum-Icon--sizeM"
           focusable="false"
           aria-hidden="true"
+          aria-label="Calendar"
         >
-          <use xlink:href="#spectrum-icon-18-Alert" />
+          <use xlink:href="#spectrum-icon-18-Calendar" />
         </svg>
-      {/if}
+      </button>
-      <input
-        data-input
-        type="text"
-        {disabled}
-        class="spectrum-Textfield-input spectrum-InputGroup-input"
-        {placeholder}
-        {id}
-        {value}
-      />
     </div>
-    <button
+  </Flatpickr>
-      type="button"
+{/key}
-      class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
-      tabindex="-1"
-      {disabled}
-      class:is-invalid={!!error}
-      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>
 {#if open}
   <div class="overlay" on:mousedown|self={flatpickr?.close} />
 {/if}

packages/bbui/src/Form/DatePicker.svelte

@@ -9,6 +9,7 @@
   export let disabled = false
   export let error = null
   export let enableTime = true
+  export let timeOnly = false
   export let placeholder = null
   export let appendTo = undefined
 
@@ -27,6 +28,7 @@
     {value}
     {placeholder}
     {enableTime}
+    {timeOnly}
     {appendTo}
     on:change={onChange}
   />

packages/bbui/src/Table/DateTimeRenderer.svelte

@@ -2,9 +2,18 @@
   import dayjs from "dayjs"
 
   export let value
+
+  // adding the 0- will turn a string like 00:00:00 into a valid ISO
+  // date, but will make actual ISO dates invalid
+  $: time = new Date(`0-${value}`)
+  $: isTime = !isNaN(time)
 </script>
 
-<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
+<div>
+  {dayjs(isTime ? time : value).format(
+    isTime ? "HH:mm:ss" : "MMMM D YYYY, HH:mm"
+  )}
+</div>
 
 <style>
   div {

packages/client/manifest.json

@@ -2453,6 +2453,12 @@
         "key": "enableTime",
         "defaultValue": true
       },
+      {
+        "type": "boolean",
+        "label": "Time Only",
+        "key": "timeOnly",
+        "defaultValue": false
+      },
       {
         "type": "text",
         "label": "Default value",

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

@@ -7,6 +7,7 @@
   export let placeholder
   export let disabled = false
   export let enableTime = false
+  export let timeOnly = false
   export let validation
   export let defaultValue
 
@@ -33,6 +34,7 @@
       id={fieldState.fieldId}
       appendTo={document.getElementById("flatpickr-root")}
       {enableTime}
+      {timeOnly}
       {placeholder}
     />
   {/if}

packages/server/scripts/integrations/mssql/data/setup.sql

@@ -36,11 +36,7 @@ CREATE TABLE people
 INSERT products
   (name, description)  
 VALUES  
-  ('Bananas', 'Fruit thing');  
+  ('Bananas', 'Fruit thing'),
-  
-INSERT products
-  (name, description)  
-VALUES  
   ('Meat', 'Animal thing');
   
 INSERT tasks

packages/server/scripts/integrations/mysql/init.sql

@@ -19,6 +19,12 @@ CREATE TABLE Tasks (
         FOREIGN KEY(PersonID)
 	    REFERENCES Persons(PersonID)
 );
+CREATE TABLE Products (
+    id serial primary key,
+    name text,
+    updated time
+);
 INSERT INTO Persons (FirstName, LastName, Age, Address, City, CreatedAt) VALUES ('Mike', 'Hughes', 28.2, '123 Fake Street', 'Belfast', '2021-01-19 03:14:07');
 INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'assembling');
 INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'processing');
+INSERT INTO Products (name, updated) VALUES ('Meat', '11:00:22'), ('Fruit', '10:00:00');