[#1219] fixed events when manual editing the datetime field and added clear button

ui/src/components/records/fields/DateField.svelte

@@ -3,6 +3,7 @@
     import Flatpickr from "svelte-flatpickr";
     import CommonHelper from "@/utils/CommonHelper";
     import Field from "@/components/base/Field.svelte";
+    import tooltip from "@/actions/tooltip";
 
     export let field = new SchemaField();
     export let value = undefined;
@@ -13,6 +14,17 @@
     $: if (value && value.length > 19) {
         value = value.substring(0, 19);
     }
+
+    // ensure that value is set even on manual input edit
+    function onClose(e) {
+        if (e.detail && e.detail.length == 3) {
+            value = e.detail[1];
+        }
+    }
+
+    function clear() {
+        value = "";
+    }
 </script>
 
 <Field class="form-field {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
@@ -20,10 +32,26 @@
         <i class={CommonHelper.getFieldTypeIcon(field.type)} />
         <span class="txt">{field.name} (UTC)</span>
     </label>
+
+    {#if value && !field.required}
+        <div class="form-field-addon">
+            <button type="button" class="link-hint clear-btn" use:tooltip={"Clear"} on:click={() => clear()}>
+                <i class="ri-close-line" />
+            </button>
+        </div>
+    {/if}
+
     <Flatpickr
         id={uniqueId}
         options={CommonHelper.defaultFlatpickrOptions()}
         {value}
         bind:formattedValue={value}
+        on:close={onClose}
     />
 </Field>
+
+<style>
+    .clear-btn {
+        margin-top: 20px;
+    }
+</style>