Fix date on new fields (#998)

Co-authored-by: Chiyu Liang <[email protected]>

src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte

@@ -11,9 +11,10 @@
     NumberInput,
     ColorInput,
     Checkbox,
-    DateInput,
+    // DateInput,
     // DatetimeInput,
   } from "obsidian-svelte";
+  import DateInput from "src/ui/components/DateInput.svelte";
   import DatetimeInput from "src/ui/components/DatetimeInput.svelte";
   import { TagsInput } from "src/ui/components/TagsInput";
   import HorizontalGroup from "src/ui/components/HorizontalGroup/HorizontalGroup.svelte";

src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte

@@ -9,9 +9,10 @@
     TextInput,
     NumberInput,
     Checkbox,
-    DateInput,
+    // DateInput,
     // DatetimeInput,
   } from "obsidian-svelte";
+  import DateInput from "src/ui/components/DateInput.svelte";
   import DatetimeInput from "src/ui/components/DatetimeInput.svelte";
   import { TagsInput } from "src/ui/components/TagsInput";
   import HorizontalGroup from "src/ui/components/HorizontalGroup/HorizontalGroup.svelte";

src/ui/components/DateInput.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import dayjs from "dayjs";
+
+  /**
+   * Specifies the date value.
+   */
+  export let value: Date | null;
+
+  /**
+   * Specifies whether to remove decorations so that it can be embedded in other
+   * components.
+   */
+  export let embed: boolean = false;
+
+  const dispatch = createEventDispatcher<{
+    change: Date | null;
+    input: Date | null;
+  }>();
+
+  function handleChange(event: Event) {
+    if (event.currentTarget instanceof HTMLInputElement) {
+      dispatch(
+        "change",
+        event.currentTarget.value
+          ? dayjs(event.currentTarget.value).toDate()
+          : null
+      );
+    }
+  }
+
+  function handleInput(event: Event) {
+    if (event.currentTarget instanceof HTMLInputElement) {
+      dispatch(
+        "input",
+        event.currentTarget.value
+          ? dayjs(event.currentTarget.value).toDate()
+          : null
+      );
+    }
+  }
+</script>
+
+<input
+  type="date"
+  class:embed
+  value={value ? dayjs(value).format("YYYY-MM-DD") : null}
+  max="9999-12-31"
+  on:change={handleChange}
+  on:input={handleInput}
+  on:blur
+/>
+
+<style>
+  input {
+    border-radius: 9999px;
+    border: 0;
+    background-color: var(--background-modifier-hover);
+    font-family: var(--font-default);
+    padding-left: var(--size-4-6);
+  }
+
+  .embed {
+    margin: 0 8px;
+  }
+</style>

src/ui/components/FieldControl/FieldControl.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import {
     Autocomplete,
-    DateInput,
+    // DateInput,
     // DatetimeInput,
     NumberInput,
     Switch,
     TextInput,
   } from "obsidian-svelte";
+  import DateInput from "../DateInput.svelte";
   import DatetimeInput from "../DatetimeInput.svelte";
   import dayjs from "dayjs";
 
@@ -75,12 +76,12 @@
       value={isDate(value) ? value : null}
       on:change={({ detail: value }) => (cachedValue = value)}
       on:blur={() => {
-        if (!cachedValue) {
+        if (!cachedValue || !isDate(value)) {
           onChange(cachedValue);
           return;
         }
         const cachedDate = dayjs(cachedValue);
-        const newDatetime = dayjs(isDate(value) ? value : null)
+        const newDatetime = dayjs(value)
           .set("year", cachedDate.year())
           .set("month", cachedDate.month())
           .set("date", cachedDate.date());

src/ui/modals/components/CreateField.svelte

@@ -8,7 +8,7 @@
     SettingItem,
     TextInput,
     NumberInput,
-    DateInput,
+    // DateInput,
     // DatetimeInput,
     Switch,
   } from "obsidian-svelte";
@@ -23,6 +23,7 @@
   } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
   import { onMount } from "svelte";
+  import DateInput from "src/ui/components/DateInput.svelte";
   import DatetimeInput from "src/ui/components/DatetimeInput.svelte";
 
   export let existingFields: DataField[];

src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { DateInput } from "obsidian-svelte";
+  // import { DateInput } from "obsidian-svelte";
+  import { isDate } from "src/lib/dataframe/dataframe";
+  import DateInput from "src/ui/components/DateInput.svelte";
   import type { Optional } from "src/lib/dataframe/dataframe";
   import dayjs from "dayjs";
 
@@ -54,11 +56,11 @@
   </svelte:fragment>
   <svelte:fragment slot="edit">
     <DateInput
-      value={value != undefined ? value : null}
-      on:change={({ detail: value }) => (cachedValue = value)}
+      value={value ?? null}
+      on:change={({ detail }) => (cachedValue = detail)}
       on:blur={() => {
         edit = false;
-        if (!cachedValue) {
+        if (!cachedValue || !isDate(value)) {
           onChange(cachedValue);
           return;
         }

src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte

@@ -60,8 +60,8 @@
   </svelte:fragment>
   <svelte:fragment slot="edit">
     <DatetimeInput
-      value={value != undefined ? value : null}
-      on:input={({ detail: value }) => (cachedValue = value)}
+      value={value ?? null}
+      on:input={({ detail }) => (cachedValue = detail)}
       on:blur={() => {
         edit = false;
         onChange(cachedValue);