From 2941ba5ade2d7bbaee0d532249a397afe62477a9 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Thu, 11 Aug 2022 11:01:48 +0100
Subject: [PATCH 1/2] Add prop for 24hr time

---
 packages/bbui/src/Form/Core/DatePicker.svelte               | 2 ++
 packages/bbui/src/Form/DatePicker.svelte                    | 2 ++
 packages/client/manifest.json                               | 6 ++++++
 .../client/src/components/app/forms/DateTimeField.svelte    | 2 ++
 4 files changed, 12 insertions(+)

diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 39a7d9d626..ff0840735b 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/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,
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index a4b2379782..a0b102dbe8 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/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}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index cfed5b65f7..0368b43562 100644
--- a/packages/client/manifest.json
+++ b/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",
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 4ca766121d..bbbc5a266d 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/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}
     />

From 16c8a6a3a62fcd3061ca95c2575d783d6d6c464b Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Thu, 11 Aug 2022 11:13:50 +0100
Subject: [PATCH 2/2] Redraw Date Picker when settings change

---
 packages/bbui/src/Form/Core/DatePicker.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index ff0840735b..d75350d8e8 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -51,6 +51,12 @@
     },
   }
 
+  $: redrawOptions = {
+    timeOnly,
+    enableTime,
+    time24hr,
+  }
+
   const handleChange = event => {
     const [dates] = event.detail
     const noTimezone = enableTime && !timeOnly && ignoreTimezones
@@ -144,7 +150,7 @@
   }
 </script>
 
-{#key timeOnly}
+{#key redrawOptions}
   <Flatpickr
     bind:flatpickr
     value={parseDate(value)}