From a74f82a5359a01cd0ba02b67d0dcf8660c9ae79a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 20 May 2024 13:06:45 +0200
Subject: [PATCH] Use native inputs

---
 .../Form/Core/DatePicker/NumberInput.svelte   |  3 +-
 .../Form/Core/DatePicker/TimePicker.svelte    | 37 +++++--------------
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
index dc4886d28d..7e013341ac 100644
--- a/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte
@@ -4,13 +4,14 @@
   export let max
   export let hideArrows = false
   export let width
+  export let type = "number"
 
   $: style = width ? `width:${width}px;` : ""
 </script>
 
 <input
   class:hide-arrows={hideArrows}
-  type="number"
+  {type}
   {style}
   {value}
   {min}
diff --git a/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
index 047e5a4f08..af38eaef7a 100644
--- a/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { cleanInput } from "./utils"
-  import dayjs from "dayjs"
   import NumberInput from "./NumberInput.svelte"
   import { createEventDispatcher } from "svelte"
 
@@ -8,39 +6,22 @@
 
   const dispatch = createEventDispatcher()
 
-  $: displayValue = value || dayjs()
+  $: displayValue = value?.format("HH:mm")
 
-  const handleHourChange = e => {
-    dispatch("change", displayValue.hour(parseInt(e.target.value)))
+  const handleChange = e => {
+    const [hour, minute] = e.target.value.split(":").map(x => parseInt(x))
+    dispatch("change", value.hour(hour).minute(minute))
   }
-
-  const handleMinuteChange = e => {
-    dispatch("change", displayValue.minute(parseInt(e.target.value)))
-  }
-
-  const cleanHour = cleanInput({ max: 23, pad: 2, fallback: "00" })
-  const cleanMinute = cleanInput({ max: 59, pad: 2, fallback: "00" })
 </script>
 
 <div class="time-picker">
   <NumberInput
     hideArrows
-    value={displayValue.hour().toString().padStart(2, "0")}
-    min={0}
-    max={23}
-    width={20}
-    on:input={cleanHour}
-    on:change={handleHourChange}
-  />
-  <span>:</span>
-  <NumberInput
-    hideArrows
-    value={displayValue.minute().toString().padStart(2, "0")}
-    min={0}
-    max={59}
-    width={20}
-    on:input={cleanMinute}
-    on:change={handleMinuteChange}
+    type={"time"}
+    value={displayValue}
+    width={60}
+    on:input={handleChange}
+    on:change={handleChange}
   />
 </div>