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 9f1d6013b2
commit ea3bd12811
2 changed files with 34 additions and 11 deletions

View File

@ -31,7 +31,11 @@
const handleChange = event => { const handleChange = event => {
const [dates] = event.detail const [dates] = event.detail
dispatch("change", dates[0]) let newValue = dates[0]
if (newValue) {
newValue = newValue.toISOString()
}
dispatch("change", newValue)
} }
const clearDateOnBackspace = event => { const clearDateOnBackspace = event => {
@ -57,11 +61,38 @@
const els = document.querySelectorAll(`#${flatpickrId} input`) const els = document.querySelectorAll(`#${flatpickrId} input`)
els.forEach(el => el.blur()) 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> </script>
<Flatpickr <Flatpickr
bind:flatpickr bind:flatpickr
{value} value={parseDate(value)}
on:open={onOpen} on:open={onOpen}
on:close={onClose} on:close={onClose}
options={flatpickrOptions} options={flatpickrOptions}

View File

@ -1,7 +1,6 @@
<script> <script>
import Field from "./Field.svelte" import Field from "./Field.svelte"
import DatePicker from "./Core/DatePicker.svelte" import DatePicker from "./Core/DatePicker.svelte"
import { createEventDispatcher } from "svelte"
export let value = null export let value = null
export let label = null export let label = null
@ -11,13 +10,6 @@
export let enableTime = true export let enableTime = true
export let placeholder = null export let placeholder = null
export let appendTo = undefined export let appendTo = undefined
const dispatch = createEventDispatcher()
const onChange = e => {
const isoString = e.detail.toISOString()
value = isoString
dispatch("change", isoString)
}
</script> </script>
<Field {label} {labelPosition} {error}> <Field {label} {labelPosition} {error}>
@ -28,6 +20,6 @@
{placeholder} {placeholder}
{enableTime} {enableTime}
{appendTo} {appendTo}
on:change={onChange} on:change
/> />
</Field> </Field>