Fixes for date/time picker issue.

This commit is contained in:
Dean 2022-04-04 11:51:52 +01:00
parent aeea15e8db
commit b8f843ebb2
2 changed files with 42 additions and 10 deletions

View File

@ -19,18 +19,35 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const flatpickrId = `${uuid()}-wrapper` const flatpickrId = `${uuid()}-wrapper`
let open = false let open = false
let flatpickr, flatpickrOptions, isTimeOnly let flatpickr, flatpickrOptions
const resolveTimeStamp = timestamp => {
let maskedDate = new Date(`0-${timestamp}`)
if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
return maskedDate
} else {
return null
}
}
const isTS = resolveTimeStamp(value) != null
$: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
$: flatpickrOptions = { $: flatpickrOptions = {
element: `#${flatpickrId}`, element: `#${flatpickrId}`,
enableTime: isTimeOnly || enableTime || false, enableTime: timeOnly || enableTime || false,
noCalendar: isTimeOnly || false, noCalendar: timeOnly || false,
altInput: true, altInput: true,
altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y", altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
wrap: true, wrap: true,
appendTo, appendTo,
disableMobile: "true", disableMobile: "true",
onReady: () => {
let timestamp = resolveTimeStamp(value)
if (timeOnly && timestamp) {
dispatch("change", timestamp.toISOString())
}
},
} }
const handleChange = event => { const handleChange = event => {
@ -76,10 +93,13 @@
return null return null
} }
let date let date
let time = new Date(`0-${val}`) let time
// it is a string like 00:00:00, just time // it is a string like 00:00:00, just time
if (timeOnly || (typeof val === "string" && !isNaN(time))) { let ts = resolveTimeStamp(val)
date = time
if (timeOnly && ts) {
date = ts
} else if (val instanceof Date) { } else if (val instanceof Date) {
// Use real date obj if already parsed // Use real date obj if already parsed
date = val date = val
@ -101,7 +121,7 @@
} }
</script> </script>
{#key isTimeOnly} {#key timeOnly}
<Flatpickr <Flatpickr
bind:flatpickr bind:flatpickr
value={parseDate(value)} value={parseDate(value)}

View File

@ -19,10 +19,22 @@
export let value = defaultValue || (meta.type === "boolean" ? false : "") export let value = defaultValue || (meta.type === "boolean" ? false : "")
export let readonly export let readonly
const resolveTimeStamp = timestamp => {
let maskedDate = new Date(`0-${timestamp}`)
if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
return maskedDate
} else {
return null
}
}
$: stringVal = $: stringVal =
typeof value === "object" ? JSON.stringify(value, null, 2) : value typeof value === "object" ? JSON.stringify(value, null, 2) : value
$: type = meta?.type $: type = meta?.type
$: label = meta.name ? capitalise(meta.name) : "" $: label = meta.name ? capitalise(meta.name) : ""
const timeStamp = resolveTimeStamp(value)
const isTimeStamp = timeStamp ? true : false
</script> </script>
{#if type === "options"} {#if type === "options"}
@ -34,7 +46,7 @@
sort sort
/> />
{:else if type === "datetime"} {:else if type === "datetime"}
<DatePicker {label} bind:value /> <DatePicker {label} timeOnly={isTimeStamp} bind:value />
{:else if type === "attachment"} {:else if type === "attachment"}
<Dropzone {label} bind:value /> <Dropzone {label} bind:value />
{:else if type === "boolean"} {:else if type === "boolean"}