Add date parsing to core date picker and ensure values are always broadcast as ISO strings
This commit is contained in:
parent
9f1d6013b2
commit
ea3bd12811
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue