Use native inputs
This commit is contained in:
parent
76ac300cf0
commit
a74f82a535
2 changed files with 11 additions and 29 deletions
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue