Merge pull request #7225 from Budibase/feature/24hr-date-picker

24hr date picker

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

@@ -16,6 +16,7 @@
   export let appendTo = undefined
   export let timeOnly = false
   export let ignoreTimezones = false
+  export let time24hr = false
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${uuid()}-wrapper`
@@ -37,6 +38,7 @@
     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,
     appendTo,
@@ -49,6 +51,12 @@
     },
   }
 
+  $: redrawOptions = {
+    timeOnly,
+    enableTime,
+    time24hr,
+  }
+
   const handleChange = event => {
     const [dates] = event.detail
     const noTimezone = enableTime && !timeOnly && ignoreTimezones
@@ -142,7 +150,7 @@
   }
 </script>
 
-{#key timeOnly}
+{#key redrawOptions}
   <Flatpickr
     bind:flatpickr
     value={parseDate(value)}

packages/bbui/src/Form/DatePicker.svelte

@@ -10,6 +10,7 @@
   export let error = null
   export let enableTime = true
   export let timeOnly = false
+  export let time24hr = false
   export let placeholder = null
   export let appendTo = undefined
   export let ignoreTimezones = false
@@ -30,6 +31,7 @@
     {placeholder}
     {enableTime}
     {timeOnly}
+    {time24hr}
     {appendTo}
     {ignoreTimezones}
     on:change={onChange}

packages/client/manifest.json

@@ -2875,6 +2875,12 @@
         "key": "timeOnly",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "24-Hour time",
+        "key": "time24hr",
+        "defaultValue": false
+      },
       {
         "type": "boolean",
         "label": "Ignore time zones",

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

@@ -8,6 +8,7 @@
   export let disabled = false
   export let enableTime = false
   export let timeOnly = false
+  export let time24hr = false
   export let ignoreTimezones = false
   export let validation
   export let defaultValue
@@ -44,6 +45,7 @@
       appendTo={document.getElementById("flatpickr-root")}
       {enableTime}
       {timeOnly}
+      {time24hr}
       {ignoreTimezones}
       {placeholder}
     />