Fixes for date/time picker issue.
This commit is contained in:
parent
aeea15e8db
commit
b8f843ebb2
|
@ -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)}
|
||||||
|
|
|
@ -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"}
|
||||||
|
|
Loading…
Reference in New Issue