From 59491d63ab7f4b98660163683f1c2a179dfc584d Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Wed, 24 Nov 2021 18:15:53 +0100 Subject: [PATCH] front/Field: add support for datetime-local field type --- src/assets/ts/datetime-local.ts | 25 +++++++++++++++++++++++++ src/assets/views/utils/Field.svelte | 15 ++++++++++++++- 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/assets/ts/datetime-local.ts diff --git a/src/assets/ts/datetime-local.ts b/src/assets/ts/datetime-local.ts new file mode 100644 index 0000000..9bd934f --- /dev/null +++ b/src/assets/ts/datetime-local.ts @@ -0,0 +1,25 @@ +export function dateToDatetimeLocal(date: Date): string { + function ten(i: number) { + return (i < 10 ? '0' : '') + i; + } + const YYYY = date.getFullYear(); + const MM = ten(date.getMonth() + 1); + const DD = ten(date.getDate()); + const HH = ten(date.getHours()); + const II = ten(date.getMinutes()); + const SS = ten(date.getSeconds()); + return YYYY + '-' + MM + '-' + DD + 'T' + + HH + ':' + II + ':' + SS; +} + +export const dateToIsoString = (function (BST) { + // BST should not be present as UTC time + if (new Date(BST).toISOString().slice(0, 16) === BST) { + return (date: Date): string => { + return new Date(date.getTime() + date.getTimezoneOffset() * 60000) + .toISOString(); + }; + } else { + return (date: Date) => date.toISOString(); + } +}('2006-06-06T06:06')); diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte index 93d1241..59e81fe 100644 --- a/src/assets/views/utils/Field.svelte +++ b/src/assets/views/utils/Field.svelte @@ -4,11 +4,13 @@ import Message from "../components/Message.svelte"; import Icon from "./Icon.svelte"; import {getContext} from "svelte"; + import {dateToDatetimeLocal, dateToIsoString} from "../../ts/datetime-local.js"; export let type: string; export let name: string; type FieldValue = string | number | Record; export let value: FieldValue | undefined = undefined; + export let initialValue: FieldValue | undefined = undefined; export let placeholder: string | undefined = undefined; export let hint: string | undefined = undefined; export let extraData: string[] | undefined = undefined; @@ -19,8 +21,12 @@ const fieldId = `${formId}-${name}-field`; const previousFormData = $locals.previousFormData() || []; + let previousFieldData = previousFormData[name]; + if (typeof value === 'number' && previousFieldData) previousFieldData = Number(previousFieldData); - value = type !== 'hidden' && previousFormData[name] || value || validation?.value || ''; + value = type !== 'hidden' && previousFieldData || value || initialValue || validation?.value || ''; + + $: initialDatetimeLocalValue = type === 'datetime-local' && typeof value === 'string' ? dateToDatetimeLocal(new Date(value)) : undefined; function durationValue(f: string): number { if (previousFormData[name]) { @@ -61,6 +67,10 @@ if (this.type === 'file') { handleFileInput(); } + + if (this.type === 'datetime-local') { + value = dateToIsoString(new Date(this.value)); + } } let input: HTMLInputElement; @@ -414,6 +424,9 @@ {:else if type === 'checkbox'} + {:else if type === 'datetime-local'} + + {:else}