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,7 +101,8 @@
   }
 </script>
 
-<Flatpickr
+{#key isTimeOnly}
+  <Flatpickr
     bind:flatpickr
     value={parseDate(value)}
     on:open={onOpen}
@@ -96,7 +110,7 @@
     options={flatpickrOptions}
     on:change={handleChange}
     element={`#${flatpickrId}`}
->
+  >
     <div
       id={flatpickrId}
       class:is-disabled={disabled}
@@ -150,7 +164,8 @@
         </svg>
       </button>
     </div>
-</Flatpickr>
+  </Flatpickr>
+{/key}
 {#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');  
-  
-INSERT products
-  (name, description)  
-VALUES  
+  ('Bananas', 'Fruit thing'),
   ('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');