diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte index 396dfcf808..f931319118 100644 --- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte +++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte @@ -68,6 +68,15 @@ maximum: schema?.constraints?.length?.maximum, } }, + [FieldType.DATETIME]: (_field, schema) => { + const props = { + valueAsTimestamp: !schema?.timeOnly, + } + if (schema?.dateOnly) { + props.enableTime = false + } + return props + }, } const fieldSchema = getFieldSchema(field) diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte index 499f0443cb..7b6ed734fe 100644 --- a/packages/client/src/components/app/forms/DateTimeField.svelte +++ b/packages/client/src/components/app/forms/DateTimeField.svelte @@ -16,15 +16,37 @@ export let onChange export let span export let helpText = null + export let valueAsTimestamp = false let fieldState let fieldApi const handleChange = e => { - const changed = fieldApi.setValue(e.detail) - if (onChange && changed) { - onChange({ value: e.detail }) + let value = e.detail + if (timeOnly && valueAsTimestamp) { + if (!isValidDate(value)) { + // Handle time only fields that are timestamps under the hood + value = timeToDateISOString(value) + } } + + const changed = fieldApi.setValue(value) + if (onChange && changed) { + onChange({ value }) + } + } + + const isValidDate = value => !isNaN(new Date(value)) + + const timeToDateISOString = value => { + let [hours, minutes] = value.split(":").map(Number) + + const date = new Date() + date.setHours(hours) + date.setMinutes(minutes) + date.setSeconds(0) + date.setMilliseconds(0) + return date.toISOString() }