diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index c1c4cc866f..fd67fa41bb 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -19,18 +19,33 @@ const dispatch = createEventDispatcher() const flatpickrId = `${uuid()}-wrapper` 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 + } + } - $: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly $: flatpickrOptions = { element: `#${flatpickrId}`, - enableTime: isTimeOnly || enableTime || false, - noCalendar: isTimeOnly || false, + enableTime: timeOnly || enableTime || false, + noCalendar: timeOnly || false, 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, appendTo, disableMobile: "true", + onReady: () => { + let timestamp = resolveTimeStamp(value) + if (timeOnly && timestamp) { + dispatch("change", timestamp.toISOString()) + } + }, } const handleChange = event => { @@ -39,10 +54,9 @@ if (newValue) { newValue = newValue.toISOString() } - // if time only set date component to today + // if time only set date component to 2000-01-01 if (timeOnly) { - const todayDate = new Date().toISOString().split("T")[0] - newValue = `${todayDate}T${newValue.split("T")[1]}` + newValue = `2000-01-01T${newValue.split("T")[1]}` } dispatch("change", newValue) } @@ -76,10 +90,13 @@ return null } let date - let time = new Date(`0-${val}`) + let time + // it is a string like 00:00:00, just time - if (timeOnly || (typeof val === "string" && !isNaN(time))) { - date = time + let ts = resolveTimeStamp(val) + + if (timeOnly && ts) { + date = ts } else if (val instanceof Date) { // Use real date obj if already parsed date = val @@ -101,7 +118,7 @@ } -{#key isTimeOnly} +{#key timeOnly} { + let maskedDate = new Date(`0-${timestamp}`) + if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) { + return maskedDate + } else { + return null + } + } + $: stringVal = typeof value === "object" ? JSON.stringify(value, null, 2) : value $: type = meta?.type $: label = meta.name ? capitalise(meta.name) : "" + + const timeStamp = resolveTimeStamp(value) + const isTimeStamp = timeStamp ? true : false {#if type === "options"} @@ -34,7 +46,7 @@ sort /> {:else if type === "datetime"} - + {:else if type === "attachment"} {:else if type === "boolean"}