Add date parsing to core date picker and ensure values are always broadcast as ISO strings
This commit is contained in:
parent
f50f9e19cf
commit
50154ece31
|
@ -31,7 +31,11 @@
|
|||
|
||||
const handleChange = event => {
|
||||
const [dates] = event.detail
|
||||
dispatch("change", dates[0])
|
||||
let newValue = dates[0]
|
||||
if (newValue) {
|
||||
newValue = newValue.toISOString()
|
||||
}
|
||||
dispatch("change", newValue)
|
||||
}
|
||||
|
||||
const clearDateOnBackspace = event => {
|
||||
|
@ -57,11 +61,38 @@
|
|||
const els = document.querySelectorAll(`#${flatpickrId} input`)
|
||||
els.forEach(el => el.blur())
|
||||
}
|
||||
|
||||
const parseDate = val => {
|
||||
if (!val) {
|
||||
return null
|
||||
}
|
||||
let date
|
||||
if (val instanceof Date) {
|
||||
// Use real date obj if already parsed
|
||||
date = val
|
||||
} else if (isNaN(val)) {
|
||||
// Treat as date string of some sort
|
||||
date = new Date(val)
|
||||
} else {
|
||||
// Treat as numerical timestamp
|
||||
date = new Date(parseInt(val))
|
||||
}
|
||||
const time = date.getTime()
|
||||
if (isNaN(time)) {
|
||||
return null
|
||||
}
|
||||
// By rounding to the nearest second we avoid locking up in an endless
|
||||
// loop in the builder, caused by potentially enriching {{ now }} to every
|
||||
// millisecond.
|
||||
return new Date(Math.floor(time / 1000) * 1000)
|
||||
}
|
||||
|
||||
$: console.log(value)
|
||||
</script>
|
||||
|
||||
<Flatpickr
|
||||
bind:flatpickr
|
||||
{value}
|
||||
value={parseDate(value)}
|
||||
on:open={onOpen}
|
||||
on:close={onClose}
|
||||
options={flatpickrOptions}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import Field from "./Field.svelte"
|
||||
import DatePicker from "./Core/DatePicker.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let value = null
|
||||
export let label = null
|
||||
|
@ -11,13 +10,6 @@
|
|||
export let enableTime = true
|
||||
export let placeholder = null
|
||||
export let appendTo = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
const isoString = e.detail.toISOString()
|
||||
value = isoString
|
||||
dispatch("change", isoString)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field {label} {labelPosition} {error}>
|
||||
|
@ -28,6 +20,6 @@
|
|||
{placeholder}
|
||||
{enableTime}
|
||||
{appendTo}
|
||||
on:change={onChange}
|
||||
on:change
|
||||
/>
|
||||
</Field>
|
||||
|
|
Loading…
Reference in New Issue