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 max
|
||||||
export let hideArrows = false
|
export let hideArrows = false
|
||||||
export let width
|
export let width
|
||||||
|
export let type = "number"
|
||||||
|
|
||||||
$: style = width ? `width:${width}px;` : ""
|
$: style = width ? `width:${width}px;` : ""
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
class:hide-arrows={hideArrows}
|
class:hide-arrows={hideArrows}
|
||||||
type="number"
|
{type}
|
||||||
{style}
|
{style}
|
||||||
{value}
|
{value}
|
||||||
{min}
|
{min}
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import { cleanInput } from "./utils"
|
|
||||||
import dayjs from "dayjs"
|
|
||||||
import NumberInput from "./NumberInput.svelte"
|
import NumberInput from "./NumberInput.svelte"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
|
@ -8,39 +6,22 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
$: displayValue = value || dayjs()
|
$: displayValue = value?.format("HH:mm")
|
||||||
|
|
||||||
const handleHourChange = e => {
|
const handleChange = e => {
|
||||||
dispatch("change", displayValue.hour(parseInt(e.target.value)))
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="time-picker">
|
<div class="time-picker">
|
||||||
<NumberInput
|
<NumberInput
|
||||||
hideArrows
|
hideArrows
|
||||||
value={displayValue.hour().toString().padStart(2, "0")}
|
type={"time"}
|
||||||
min={0}
|
value={displayValue}
|
||||||
max={23}
|
width={60}
|
||||||
width={20}
|
on:input={handleChange}
|
||||||
on:input={cleanHour}
|
on:change={handleChange}
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue