fixed zindex thing - brightness was the problem

front/js/svelte/records/elements/Datetime.svelte

@@ -1,27 +1,21 @@
 <script>
-    import Datalist from "./Datalist.svelte";
     import {onMount} from "svelte";
     import flatpickr from "flatpickr";
     import "flatpickr/dist/flatpickr.css";
     import "flatpickr/dist/themes/light.css";
     import {getErrorMessage} from "./errorMessage";
-    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let value;
     export let isCreateMode;
     export let validationErrors;
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    $: search = "";
-    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
     export let id;
-    let list;
     let pickerInput;
     let pickerInstance;
     let flatpickrOptions = {
-        enableTime: false,
         allowInput: true,
         altInput: true,
         altFormat: "Y-m-d H:i:S",
@@ -41,64 +35,14 @@
 
     onMount(() => {
         if (!field.readonly || isCreateMode) {
-            if (listMode) {
-                flatpickrOptions.clickOpens = false;
-            }
             pickerInstance = flatpickr(pickerInput, flatpickrOptions);
         }
     });
 </script>
 
 <div class="mb-0">
-    {#if listMode}
-        <div class="dropdown d-flex">
-            <input
-                type="search"
-                {id}
-                on:keyup={list.update}
-                on:focus={list.update}
-                class="form-control dropdown-toggle"
-                class:is-invalid={errorMessage}
-                bind:value={search}
-                bind:this={pickerInput}
-                placeholder="Search for options"
-                data-bs-toggle="dropdown"
-                autocomplete="off"
-                readonly={field.readonly && !isCreateMode}
-            />
-            <button
-                class="btn btn-light ms-1"
-                on:click|preventDefault={(e) => pickerInstance.open()}
-            >
-                <Icon icon="calendar"/>
-            </button>
-            <ul class="dropdown-menu w-100">
-                {#if field.optionsFrom}
-                    <Datalist
-                        {field}
-                        bind:this={list}
-                        bind:value
-                        bind:search
-                    />
-                {/if}
-            </ul>
-        </div>
-        {#if value}
-            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
-                <div class="d-flex align-items-center ">
-                    {value}
-                    <button
-                        on:click|preventDefault={(e) => (value = "")}
-                        type="button"
-                        class="btn-close btn-sm  ms-1"
-                        style="font-size:10px"
-                        aria-label="Close"
-                    />
-                </div>
-            </span>
-        {/if}
-    {:else}
-        <input
+
+    <input
             type="text"
             {id}
             class="form-control"
@@ -107,10 +51,9 @@
             bind:this={pickerInput}
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
-        />
-    {/if}
-    <small class=" text-primary  opacity-50"
-    >Dates are displayed according to your timezone: {timezone}</small
+    />
+    <span class="system-help-text"
+    >Dates are displayed according to your timezone: {timezone}</span
     >
 
     {#if errorMessage}