Add date parsing to core date picker and ensure values are always broadcast as ISO strings

This commit is contained in:
Andrew Kingston 2021-10-18 17:11:12 +01:00
parent f50f9e19cf
commit 50154ece31
2 changed files with 34 additions and 11 deletions

View File

@ -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}

View File

@ -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>