front/Field: add support for datetime-local field type

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'));

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<string, FieldValue>;
     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 @@
                 </div>
             {:else if type === 'checkbox'}
                 <input {type} {name} id={fieldId} checked={value === 'on'} {...$$restProps} bind:this={input}>
+            {:else if type === 'datetime-local'}
+                <input {type} bind:this={input} on:input={handleInput} value={initialDatetimeLocalValue}>
+                <input type="hidden" {name} {value}>
             {:else}
                 <input {type} {name} id={fieldId} {value} {...$$restProps} bind:this={input} on:input={handleInput}
                        tabindex={type === 'file' ? '-1' : undefined}>