Use native inputs

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}

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>