From 3c81fba0b61699c483d2389c39c06672a4806f48 Mon Sep 17 00:00:00 2001
From: Maarten den Braber <m@mdbraber.com>
Date: Sun, 26 Jan 2025 00:09:45 +0100
Subject: [PATCH 01/10] Fix date on new fields

---
 src/ui/components/FieldControl/FieldControl.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/FieldControl/FieldControl.svelte b/src/ui/components/FieldControl/FieldControl.svelte
index e427c22d..4b522b15 100644
--- a/src/ui/components/FieldControl/FieldControl.svelte
+++ b/src/ui/components/FieldControl/FieldControl.svelte
@@ -76,11 +76,11 @@
       on:change={({ detail: value }) => (cachedValue = value)}
       on:blur={() => {
         if (!cachedValue) {
-          onChange(cachedValue);
+          onChange();
           return;
         }
         const cachedDate = dayjs(cachedValue);
-        const newDatetime = dayjs(isDate(value) ? value : null)
+        const newDatetime = dayjs(isDate(value) ? value : cachedValue)
           .set("year", cachedDate.year())
           .set("month", cachedDate.month())
           .set("date", cachedDate.date());

From 71c3574bbf8bd647927d192d9304e7dbebe184e6 Mon Sep 17 00:00:00 2001
From: Chiyu Liang <532117255@qq.com>
Date: Sat, 25 Jan 2025 20:23:43 -0500
Subject: [PATCH 02/10] Fix date input

Add input event handler call to DateInput

Shift to local DateInput component

Reserve submitting null when no cache

Simplified date / datetime input

Clean up
---
 .../viewOptions/color/ColorOptions.svelte     |  3 +-
 .../viewOptions/filter/FilterOptions.svelte   |  3 +-
 src/ui/components/DateInput.svelte            | 66 +++++++++++++++++++
 .../FieldControl/FieldControl.svelte          |  9 +--
 src/ui/modals/components/CreateField.svelte   |  3 +-
 .../GridCell/GridDateCell/GridDateCell.svelte | 10 +--
 .../GridDatetimeCell/GridDatetimeCell.svelte  |  4 +-
 7 files changed, 85 insertions(+), 13 deletions(-)
 create mode 100644 src/ui/components/DateInput.svelte

diff --git a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
index 49231f49..874fa346 100644
--- a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
+++ b/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";
diff --git a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte b/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
index 21a2144e..ca4ef151 100644
--- a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
+++ b/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";
diff --git a/src/ui/components/DateInput.svelte b/src/ui/components/DateInput.svelte
new file mode 100644
index 00000000..e7ca4a42
--- /dev/null
+++ b/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>
diff --git a/src/ui/components/FieldControl/FieldControl.svelte b/src/ui/components/FieldControl/FieldControl.svelte
index 4b522b15..19121ff7 100644
--- a/src/ui/components/FieldControl/FieldControl.svelte
+++ b/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) {
-          onChange();
+        if (!cachedValue || !isDate(value)) {
+          onChange(cachedValue);
           return;
         }
         const cachedDate = dayjs(cachedValue);
-        const newDatetime = dayjs(isDate(value) ? value : cachedValue)
+        const newDatetime = dayjs(value)
           .set("year", cachedDate.year())
           .set("month", cachedDate.month())
           .set("date", cachedDate.date());
diff --git a/src/ui/modals/components/CreateField.svelte b/src/ui/modals/components/CreateField.svelte
index aac2bcc0..29797e9e 100644
--- a/src/ui/modals/components/CreateField.svelte
+++ b/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[];
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
index 159da66a..e4424664 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
+++ b/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;
         }
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
index e3a90da6..1efe6d20 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
+++ b/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);

From dd2365543389094bc7ad1e2e35a3ea9f9dd0c824 Mon Sep 17 00:00:00 2001
From: Chiyu Liang <532117255@qq.com>
Date: Sun, 26 Jan 2025 05:24:30 -0500
Subject: [PATCH 03/10] Introduce temporal

Write date string back according to timezone

Only reserve non-local timezone marks, non-DST save. Possible solution should be providing settings to specify user zone

Add hint

Resume input events on date inputs

Extend date string support for timezoneId

Fix date parsing

Remove dayjs

Cancel default date filling in field creation

Refactor date string parsing

Clean up redundant comments and tests

Fix bugs on filters and card display

Fix calendar date range

Refactor calendar with Temporal

Seems buggy, needs unit test to calendar helpers

Refactor using Temporal

Stage 1: Handle most views and sorts, except for calendar
---
 package-lock.json                             |  19 +-
 package.json                                  |   4 +-
 src/lib/dataApi.ts                            |  35 +-
 src/lib/dataframe/dataframe.ts                |  55 +--
 src/lib/datasources/dataview/standardize.ts   |   4 +-
 src/lib/datasources/helpers.ts                |  51 ++-
 src/main.ts                                   |   6 -
 src/ui/app/filterFunctions.ts                 |  50 ++-
 src/ui/app/onboarding/demoProject.ts          |  14 +-
 .../viewOptions/color/ColorOptions.svelte     |  10 +-
 .../viewOptions/filter/FilterOptions.svelte   |  10 +-
 src/ui/app/viewSort.test.ts                   | 337 +++++++++++++++---
 src/ui/app/viewSort.ts                        |  17 +-
 src/ui/components/CardMetadata/Date.svelte    |   7 +-
 .../components/CardMetadata/Datetime.svelte   |   7 +-
 src/ui/components/DateInput.svelte            |  15 +-
 src/ui/components/DatetimeInput.svelte        |  14 +-
 .../FieldControl/FieldControl.svelte          |  57 ++-
 src/ui/modals/components/CreateField.svelte   |  78 ++--
 src/ui/views/Calendar/CalendarView.svelte     |  35 +-
 src/ui/views/Calendar/calendar.ts             | 130 ++++---
 .../Calendar/components/Calendar/Day.svelte   |  10 +-
 .../GridCell/GridDateCell/GridDateCell.svelte |  65 +++-
 .../GridDatetimeCell/GridDatetimeCell.svelte  |  73 +++-
 24 files changed, 801 insertions(+), 302 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d5b5502b..3ca782dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
         "@typescript-eslint/eslint-plugin": "^8.16.0",
         "@typescript-eslint/parser": "^8.16.0",
         "builtin-modules": "^3.3.0",
-        "dayjs": "^1.11.11",
         "esbuild": "^0.16.17",
         "esbuild-jest": "^0.5.0",
         "esbuild-plugin-replace": "^1.4.0",
@@ -47,6 +46,7 @@
         "svelte-i18next": "^2.2.2",
         "svelte-media-queries": "^1.6.2",
         "svelte-preprocess": "^5.1.4",
+        "temporal-polyfill": "^0.2.5",
         "ts-essentials": "^10.0.3",
         "ts-jest": "^29.1.3",
         "tslib": "^2.6.2",
@@ -7620,6 +7620,23 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/temporal-polyfill": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.5.tgz",
+      "integrity": "sha512-ye47xp8Cb0nDguAhrrDS1JT1SzwEV9e26sSsrWzVu+yPZ7LzceEcH0i2gci9jWfOfSCCgM3Qv5nOYShVUUFUXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "temporal-spec": "^0.2.4"
+      }
+    },
+    "node_modules/temporal-spec": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.4.tgz",
+      "integrity": "sha512-lDMFv4nKQrSjlkHKAlHVqKrBG4DyFfa9F74cmBZ3Iy3ed8yvWnlWSIdi4IKfSqwmazAohBNwiN64qGx4y5Q3IQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/test-exclude/-/test-exclude-6.0.0.tgz",
diff --git a/package.json b/package.json
index 1c0aecb3..8df699f3 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
     "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
     "builtin-modules": "^3.3.0",
-    "dayjs": "^1.11.11",
     "esbuild": "^0.16.17",
     "esbuild-jest": "^0.5.0",
     "esbuild-plugin-replace": "^1.4.0",
@@ -56,6 +55,7 @@
     "svelte-i18next": "^2.2.2",
     "svelte-media-queries": "^1.6.2",
     "svelte-preprocess": "^5.1.4",
+    "temporal-polyfill": "^0.2.5",
     "ts-essentials": "^10.0.3",
     "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
@@ -63,4 +63,4 @@
     "uuid": "^11.0.3",
     "yaml": "^2.4.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/dataApi.ts b/src/lib/dataApi.ts
index bac957d8..75c94530 100644
--- a/src/lib/dataApi.ts
+++ b/src/lib/dataApi.ts
@@ -1,4 +1,3 @@
-import dayjs from "dayjs";
 import { produce } from "immer";
 import moment from "moment";
 import { get } from "svelte/store";
@@ -17,6 +16,7 @@ import { decodeFrontMatter, encodeFrontMatter } from "./metadata";
 import { i18n } from "./stores/i18n";
 import { settings } from "./stores/settings";
 import { interpolateTemplate } from "./templates/interpolate";
+import { Temporal } from "temporal-polyfill";
 
 import { function as F, task as T, either as E, taskEither as TE } from "fp-ts";
 import {
@@ -181,21 +181,38 @@ export function doUpdateRecord(
         Object.entries({ ...frontmatter, ...record.values })
           .map((entry) => {
             if (isDate(entry[1])) {
-              const isDatetime = fields.find(
+              const hasTime = fields.some(
                 (field) =>
                   field.name === entry[0] &&
                   field.type === DataFieldType.Date &&
                   (field.typeConfig?.time ||
-                    entry[1].getHours() ||
-                    entry[1].getMinutes() ||
-                    entry[1].getSeconds() ||
-                    entry[1].getMilliseconds())
+                    entry[1].hour ||
+                    entry[1].minute ||
+                    entry[1].second)
               );
 
+              const zoned =
+                entry[1].timeZoneId !== Temporal.Now.timeZoneId() && // default "+08:00" comparing to "America/New York"
+                entry[1].offset !== Temporal.Now.zonedDateTimeISO().offset; // default "+08:00" comparing to "-05:00"
+
+              // const hasOffset =
+              const utc = entry[1].timeZoneId === "UTC";
+              //TODO; format with Z mark, seems hard to do w/0 third-party libs
+
               return produce(entry, (draft) => {
-                draft[1] = dayjs(entry[1]).format(
-                  isDatetime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD"
-                );
+                draft[1] = hasTime
+                  ? zoned
+                    ? (entry[1] as Temporal.ZonedDateTime).toString({
+                        smallestUnit: "minute",
+                        offset: "auto",
+                        timeZoneName: "never",
+                      })
+                    : (entry[1] as Temporal.ZonedDateTime)
+                        .toPlainDateTime()
+                        .toString({ smallestUnit: "minute" })
+                  : (entry[1] as Temporal.ZonedDateTime)
+                      .toPlainDate()
+                      .toString();
               });
             }
             return entry;
diff --git a/src/lib/dataframe/dataframe.ts b/src/lib/dataframe/dataframe.ts
index ed77a55e..5f827a87 100644
--- a/src/lib/dataframe/dataframe.ts
+++ b/src/lib/dataframe/dataframe.ts
@@ -1,5 +1,6 @@
 import type { FieldConfig } from "src/settings/settings";
 import type { RecordError } from "../datasources/frontmatter/datasource";
+import { Temporal } from "temporal-polyfill";
 
 /**
  * DataFrame is the core data structure that contains structured data for a
@@ -77,32 +78,32 @@ export type DataValue =
   | string
   | number
   | boolean
-  | Date
+  | Temporal.ZonedDateTime
   | Array<Optional<DataValue>>;
 
-export function isOptionalDataValue(
-  value: unknown
-): value is Optional<DataValue> {
-  switch (typeof value) {
-    case "string":
-      return true;
-    case "number":
-      return true;
-    case "boolean":
-      return true;
-    default:
-      return false;
-  }
-}
+// export function isOptionalDataValue(
+//   value: unknown
+// ): value is Optional<DataValue> {
+//   switch (typeof value) {
+//     case "string":
+//       return true;
+//     case "number":
+//       return true;
+//     case "boolean":
+//       return true;
+//     default:
+//       return false;
+//   }
+// }
 
-export function isRepeatedDataValue(
-  value: unknown
-): value is Array<Optional<DataValue>> {
-  if (Array.isArray(value)) {
-    return value.every(isOptionalDataValue);
-  }
-  return false;
-}
+// export function isRepeatedDataValue(
+//   value: unknown
+// ): value is Array<Optional<DataValue>> {
+//   if (Array.isArray(value)) {
+//     return value.every(isOptionalDataValue);
+//   }
+//   return false;
+// }
 
 export type Optional<T> =
   | T
@@ -138,8 +139,10 @@ export function isNumber(
   return typeof value === "number";
 }
 
-export function isDate(value: Optional<DataValue> | DataValue): value is Date {
-  return value instanceof Date;
+export function isDate(
+  value: Optional<DataValue> | DataValue
+): value is Temporal.ZonedDateTime {
+  return value instanceof Temporal.ZonedDateTime;
 }
 
 // export function hasValue(value: Optional<DataValue>): value is DataValue {
@@ -179,7 +182,7 @@ export function isOptionalNumber(
 
 export function isOptionalDate(
   value: Optional<DataValue>
-): value is Optional<Date> {
+): value is Optional<Temporal.ZonedDateTime> {
   return isDate(value) || isOptional(value);
 }
 
diff --git a/src/lib/datasources/dataview/standardize.ts b/src/lib/datasources/dataview/standardize.ts
index 2e219ab1..fb5ade2a 100644
--- a/src/lib/datasources/dataview/standardize.ts
+++ b/src/lib/datasources/dataview/standardize.ts
@@ -1,6 +1,6 @@
-import dayjs from "dayjs";
 import type { Link } from "obsidian-dataview";
 import type { DataValue, Optional } from "src/lib/dataframe/dataframe";
+import { Temporal } from "temporal-polyfill";
 
 /**
  * standardizeValues converts a Dataview data structure of values to the common
@@ -36,6 +36,6 @@ function standardizeObject(value: any) {
     return (value as Link).toString();
   }
   if ("ts" in value) {
-    return dayjs(value.ts).format("YYYY-MM-DD");
+    return Temporal.PlainDateTime.from(value.c).toString()
   }
 }
diff --git a/src/lib/datasources/helpers.ts b/src/lib/datasources/helpers.ts
index d29283f4..a4bf0a54 100644
--- a/src/lib/datasources/helpers.ts
+++ b/src/lib/datasources/helpers.ts
@@ -1,5 +1,3 @@
-import dayjs from "dayjs";
-
 import {
   DataFieldType,
   type DataField,
@@ -7,6 +5,7 @@ import {
   type DataValue,
   type Optional,
 } from "../dataframe/dataframe";
+import { Temporal } from "temporal-polyfill";
 
 /**
  * Parses the values for each record based on the detected field types.
@@ -31,7 +30,9 @@ export function parseRecords(
       switch (field.type) {
         case DataFieldType.Date:
           if (typeof value === "string") {
-            record.values[field.name] = dayjs(value).toDate();
+            record.values[field.name] = parseStringDate(value);
+          } else if (typeof value === "number") {
+            record.values[field.name] = parseNumberDate(value);
           }
           break;
         case DataFieldType.Number:
@@ -46,7 +47,7 @@ export function parseRecords(
           break;
         case DataFieldType.String:
           if (typeof value !== "object") {
-            record.values[field.name] = value?.toLocaleString();
+            record.values[field.name] = value?.toLocaleString(); //TODO: refine this
           }
           break;
       }
@@ -55,6 +56,44 @@ export function parseRecords(
   return records;
 }
 
+function parseStringDate(value: string) {
+  for (const parseFn of [
+    () => Temporal.ZonedDateTime.from(value), // with timezone id
+    () => Temporal.Instant.from(value).toZonedDateTimeISO(value), // with timezone offset
+    () =>
+      Temporal.PlainDateTime.from(value).toZonedDateTime(
+        Temporal.Now.timeZoneId()
+      ), // w/o timezone info
+  ]) {
+    try {
+      return parseFn();
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
+function parseNumberDate(value: number) {
+  for (const parseFn of [
+    () =>
+      Temporal.PlainDateTime.from(value.toString()).toZonedDateTime(
+        Temporal.Now.timeZoneId()
+      ),
+    () =>
+      Temporal.Instant.fromEpochMilliseconds(value).toZonedDateTimeISO(
+        Temporal.Now.timeZoneId()
+      ),
+  ]) {
+    try {
+      return parseFn();
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
 /**
  * Merges a new version of `values` into a copy of data record.
  *
@@ -123,7 +162,9 @@ export function detectCellType(value: unknown): DataFieldType {
   // Standard types
   if (typeof value === "string") {
     if (
-      /^\d{4}-\d{2}-\d{2}(T)?(\d{2})?(:\d{2})?(:\d{2})?(.\d{3})?$/.test(value)
+      /^\d{4}-\d{2}-\d{2}(?:[Tt ](?:\d{2})?(?::\d{2})?(?::\d{2})?(?:.\d+)?(?:[+-]\d{2}(?::?\d{2})?|[Zz])?(?:\[[^\]]+\])?)?$/.test(
+        value
+      )
     ) {
       return DataFieldType.Date;
     }
diff --git a/src/main.ts b/src/main.ts
index aa87c764..7c75b3f7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,3 @@
-import dayjs from "dayjs";
-import isoWeek from "dayjs/plugin/isoWeek";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 import { either, task, taskEither } from "fp-ts";
 import { pipe } from "fp-ts/lib/function";
 import { Plugin, TFolder, WorkspaceLeaf, addIcon } from "obsidian";
@@ -25,9 +22,6 @@ import {
 } from "./settings/settings";
 import { ProjectsView, VIEW_TYPE_PROJECTS } from "./view";
 
-dayjs.extend(isoWeek);
-dayjs.extend(localizedFormat);
-
 const PROJECTS_PLUGIN_ID = "obsidian-projects";
 
 export default class ProjectsPlugin extends Plugin {
diff --git a/src/ui/app/filterFunctions.ts b/src/ui/app/filterFunctions.ts
index 993ac7ad..ee5288f4 100644
--- a/src/ui/app/filterFunctions.ts
+++ b/src/ui/app/filterFunctions.ts
@@ -1,5 +1,4 @@
 import { produce } from "immer";
-import dayjs from "dayjs";
 import {
   type DataFrame,
   type DataRecord,
@@ -27,6 +26,7 @@ import {
   type DateFilterOperator,
   type ListFilterOperator,
 } from "src/settings/settings";
+import { Temporal } from "temporal-polyfill";
 
 export function matchesCondition(
   cond: FilterCondition,
@@ -61,10 +61,30 @@ export function matchesCondition(
   } else if (isOptionalBoolean(value) && isBooleanFilterOperator(operator)) {
     return booleanFns[operator](value);
   } else if (isOptionalDate(value) && isDateFilterOperator(operator)) {
-    return dateFns[operator](
-      value,
-      cond.value ? dayjs(cond.value).toDate() : undefined
-    );
+    let parsedValue = null; // TODO: extract to help functions / processing numbers
+    if (cond.value) {
+      try {
+        // Attempt to parse as ZonedDateTime
+        parsedValue = Temporal.ZonedDateTime.from(cond.value);
+      } catch {
+        try {
+          // Attempt to parse as Instant and convert to ZonedDateTime
+          parsedValue = Temporal.Instant.from(cond.value).toZonedDateTimeISO(
+            cond.value
+          );
+        } catch {
+          try {
+            // Attempt to create ZonedDateTime using the current time and a PlainDate
+            parsedValue = Temporal.PlainDateTime.from(
+              cond.value
+            ).toZonedDateTime(Temporal.Now.timeZoneId());
+          } catch {
+            parsedValue = null; // Default to null if all parsing fails
+          }
+        }
+      }
+    }
+    return dateFns[operator](value, parsedValue ?? undefined);
   }
 
   return false;
@@ -137,22 +157,28 @@ export const booleanFns: Record<
 };
 
 export const dateFns: Record<
+  //TODO: handle datetime
   DateFilterOperator,
-  (left: Optional<Date>, right?: Optional<Date>) => boolean
+  (
+    left: Optional<Temporal.ZonedDateTime>,
+    right?: Optional<Temporal.ZonedDateTime>
+  ) => boolean
 > = {
   "is-on": (left, right) => {
-    return left && right ? left.getTime() == right.getTime() : false;
+    return left && right ? left.equals(right) : false;
   },
   "is-not-on": (left, right) =>
-    left && right ? left.getTime() != right.getTime() : true,
+    left?.toPlainDateTime() && right?.toPlainDateTime()
+      ? !left.toPlainDateTime().equals(right.toPlainDateTime())
+      : true,
   "is-before": (left, right) =>
-    left && right ? left.getTime() < right.getTime() : false,
+    left && right ? Temporal.PlainDateTime.compare(left, right) == -1 : false,
   "is-after": (left, right) =>
-    left && right ? left.getTime() > right.getTime() : false,
+    left && right ? Temporal.PlainDateTime.compare(left, right) == 1 : false,
   "is-on-and-before": (left, right) =>
-    left && right ? left.getTime() <= right.getTime() : false,
+    left && right ? Temporal.PlainDateTime.compare(left, right) < 1 : false,
   "is-on-and-after": (left, right) =>
-    left && right ? left.getTime() >= right.getTime() : false,
+    left && right ? Temporal.PlainDateTime.compare(left, right) > -1 : false,
 };
 
 export const listFns_multitext: Record<
diff --git a/src/ui/app/onboarding/demoProject.ts b/src/ui/app/onboarding/demoProject.ts
index 3856b296..0cae62ea 100644
--- a/src/ui/app/onboarding/demoProject.ts
+++ b/src/ui/app/onboarding/demoProject.ts
@@ -1,6 +1,6 @@
-import dayjs from "dayjs";
 import { normalizePath, stringifyYaml, type Vault } from "obsidian";
 import { v4 as uuidv4 } from "uuid";
+import { Temporal } from "temporal-polyfill";
 
 import { settings } from "src/lib/stores/settings";
 import type { BoardConfig } from "src/ui/views/Board/types";
@@ -14,12 +14,12 @@ export async function createDemoProject(vault: Vault) {
 
   await vault.createFolder(demoFolder);
 
-  const startDate = dayjs();
+  const startDate = Temporal.Now.zonedDateTimeISO();
 
   const files = {
     "The Best Notes You'll Ever Make": {
       status: "Done",
-      due: startDate.subtract(2, "weeks").format("YYYY-MM-DD"),
+      due: startDate.subtract({weeks: 2}).toPlainDate().toString(),
       published: true,
       weight: 1,
       tags: ["note-taking"],
@@ -28,7 +28,7 @@ export async function createDemoProject(vault: Vault) {
     },
     "The Easiest Way to Start Taking Notes": {
       status: "Done",
-      due: startDate.subtract(1, "weeks").format("YYYY-MM-DD"),
+      due: startDate.subtract({weeks: 1}).toPlainDate().toString(),
       published: true,
       weight: 2,
       tags: ["note-taking", "obsidian"],
@@ -37,7 +37,7 @@ export async function createDemoProject(vault: Vault) {
     },
     "Why You Should Be Taking More Notes": {
       status: "Doing",
-      due: startDate.format("YYYY-MM-DD"),
+      due: startDate.toPlainDate().toString(),
       published: false,
       weight: 3,
       tags: ["note-taking", "pkm"],
@@ -46,7 +46,7 @@ export async function createDemoProject(vault: Vault) {
     },
     "What I Learned From Taking 15,000 Notes": {
       status: "Backlog",
-      due: startDate.add(1, "weeks").format("YYYY-MM-DD"),
+      due: startDate.add({weeks: 1}).toPlainDate().toString(),
       published: false,
       weight: 4,
       tags: ["pkm", "obsidian"],
@@ -55,7 +55,7 @@ export async function createDemoProject(vault: Vault) {
     },
     "5 Mistakes I Made When I Started Using Obsidian": {
       status: "Backlog",
-      due: startDate.add(2, "weeks").format("YYYY-MM-DD"),
+      due: startDate.add({weeks: 2}).toPlainDate().toString(),
       published: false,
       tags: ["obsidian"],
       image:
diff --git a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
index 874fa346..f69ae3c2 100644
--- a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
+++ b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { produce } from "immer";
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
   import { dndzone } from "svelte-dnd-action";
   import {
     Button,
@@ -165,12 +165,16 @@
         {:else if filterOperatorTypes[rule.condition.operator] === "binary-date"}
           {#if field?.typeConfig?.time}
             <DatetimeInput
-              value={dayjs(rule.condition.value ?? "").toDate()}
+              value={rule.condition.value
+                ? Temporal.PlainDateTime.from(rule.condition.value)
+                : Temporal.Now.plainDateTimeISO()}
               on:blur={handleValueChange(i)}
             />
           {:else}
             <DateInput
-              value={dayjs(rule.condition.value ?? "").toDate()}
+              value={rule.condition.value
+                ? Temporal.PlainDate.from(rule.condition.value)
+                : Temporal.Now.plainDateISO()}
               on:blur={handleValueChange(i)}
             />
           {/if}
diff --git a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte b/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
index ca4ef151..be4f0bb6 100644
--- a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
+++ b/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { produce } from "immer";
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
   import {
     Button,
     IconButton,
@@ -139,12 +139,16 @@
       {:else if filterOperatorTypes[condition.operator] === "binary-date"}
         {#if field?.typeConfig?.time}
           <DatetimeInput
-            value={dayjs(condition.value ?? "").toDate()}
+            value={condition.value
+              ? Temporal.PlainDateTime.from(condition.value)
+              : null}
             on:blur={handleValueChange(i)}
           />
         {:else}
           <DateInput
-            value={dayjs(condition.value ?? "").toDate()}
+            value={condition.value
+              ? Temporal.PlainDate.from(condition.value)
+              : null}
             on:blur={handleValueChange(i)}
           />
         {/if}
diff --git a/src/ui/app/viewSort.test.ts b/src/ui/app/viewSort.test.ts
index 69f674ef..043009a9 100644
--- a/src/ui/app/viewSort.test.ts
+++ b/src/ui/app/viewSort.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { applySort } from "./viewSort";
+import { Temporal } from "temporal-polyfill";
 
 describe("applySort", () => {
   const frame = {
@@ -10,7 +11,11 @@ describe("applySort", () => {
         values: {
           author: "Alice",
           age: 1,
-          due: new Date(Date.UTC(2001, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2001,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
           weight: 10,
         },
       },
@@ -19,7 +24,11 @@ describe("applySort", () => {
         values: {
           author: "Charlie",
           age: 3,
-          due: new Date(Date.UTC(2021, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2021,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
           weight: 100,
         },
       },
@@ -28,7 +37,11 @@ describe("applySort", () => {
         values: {
           author: "Bob",
           age: 2,
-          due: new Date(Date.UTC(2011, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2011,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
           weight: 100,
         },
       },
@@ -48,7 +61,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -57,7 +74,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -66,7 +87,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -87,7 +112,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -96,7 +125,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -105,7 +138,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -126,7 +163,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -135,7 +176,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -144,7 +189,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -165,7 +214,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -174,7 +227,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -183,7 +240,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -204,7 +265,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -213,7 +278,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -222,7 +291,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -243,7 +316,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -252,7 +329,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -261,7 +342,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -285,7 +370,11 @@ describe("applySort", () => {
           values: {
             author: "Alice",
             age: 1,
-            due: new Date(Date.UTC(2001, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2001,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 10,
           },
         },
@@ -294,7 +383,11 @@ describe("applySort", () => {
           values: {
             author: "Bob",
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -303,7 +396,11 @@ describe("applySort", () => {
           values: {
             author: "Charlie",
             age: 3,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
             weight: 100,
           },
         },
@@ -401,7 +498,11 @@ describe("sort empty values to the end", () => {
         values: {
           author: null,
           age: 2,
-          due: new Date(Date.UTC(2011, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2011,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
         },
       },
       {
@@ -409,7 +510,11 @@ describe("sort empty values to the end", () => {
         values: {
           author: "",
           age: 3,
-          due: new Date(Date.UTC(2031, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2031,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
         },
       },
       {
@@ -417,7 +522,11 @@ describe("sort empty values to the end", () => {
         values: {
           author: undefined,
           age: 4,
-          due: new Date(Date.UTC(2025, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2025,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
         },
       },
       {
@@ -433,7 +542,11 @@ describe("sort empty values to the end", () => {
         values: {
           author: "Charlie",
           age: null,
-          due: new Date(Date.UTC(2021, 1, 1)),
+          due: Temporal.PlainDate.from({
+            year: 2021,
+            month: 1,
+            day: 1,
+          }).toZonedDateTime(Temporal.Now.timeZoneId()),
         },
       },
     ],
@@ -452,7 +565,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -468,7 +585,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -476,7 +597,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -484,7 +609,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
       ],
@@ -504,7 +633,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -520,7 +653,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -528,7 +665,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -536,7 +677,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
       ],
@@ -564,7 +709,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -572,7 +721,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -580,7 +733,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -588,7 +745,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
       ],
@@ -608,7 +769,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -616,7 +781,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -624,7 +793,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -640,7 +813,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
       ],
@@ -660,7 +837,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -668,7 +849,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -676,7 +861,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -684,7 +873,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -712,7 +905,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -720,7 +917,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -728,7 +929,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -736,7 +941,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -767,7 +976,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "",
             age: 3,
-            due: new Date(Date.UTC(2031, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2031,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -783,7 +996,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: "Charlie",
             age: null,
-            due: new Date(Date.UTC(2021, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2021,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -791,7 +1008,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: undefined,
             age: 4,
-            due: new Date(Date.UTC(2025, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2025,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
         {
@@ -799,7 +1020,11 @@ describe("sort empty values to the end", () => {
           values: {
             author: null,
             age: 2,
-            due: new Date(Date.UTC(2011, 1, 1)),
+            due: Temporal.PlainDate.from({
+              year: 2011,
+              month: 1,
+              day: 1,
+            }).toZonedDateTime(Temporal.Now.timeZoneId()),
           },
         },
       ],
diff --git a/src/ui/app/viewSort.ts b/src/ui/app/viewSort.ts
index 1574087f..52237d67 100644
--- a/src/ui/app/viewSort.ts
+++ b/src/ui/app/viewSort.ts
@@ -7,6 +7,7 @@ import {
 } from "../../lib/dataframe/dataframe";
 import type { SortDefinition, SortingCriteria } from "src/settings/settings";
 import type { DataRecord } from "../../lib/dataframe/dataframe";
+import { Temporal } from "temporal-polyfill";
 
 export function applySort(frame: DataFrame, sort: SortDefinition): DataFrame {
   return produce(frame, (draft) => {
@@ -88,14 +89,14 @@ function sortNumber(a: number, b: number, asc: boolean): number {
   return 0;
 }
 
-function sortDate(a: Date, b: Date, asc: boolean): number {
-  if (a.getTime() < b.getTime()) {
-    return asc ? -1 : 1;
-  }
-  if (a.getTime() > b.getTime()) {
-    return asc ? 1 : -1;
-  }
-  return 0;
+function sortDate(
+  a: Temporal.ZonedDateTime,
+  b: Temporal.ZonedDateTime,
+  asc: boolean
+): number {
+  return asc
+    ? Temporal.ZonedDateTime.compare(a, b)
+    : Temporal.ZonedDateTime.compare(b, a);
 }
 
 function sortBoolean(a: boolean, b: boolean, asc: boolean): number {
diff --git a/src/ui/components/CardMetadata/Date.svelte b/src/ui/components/CardMetadata/Date.svelte
index 1396e709..194b8d6f 100644
--- a/src/ui/components/CardMetadata/Date.svelte
+++ b/src/ui/components/CardMetadata/Date.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     DataFieldType,
+    isDate,
     type DataField,
     type DataValue,
     type Optional,
@@ -10,10 +11,10 @@
   export let field: DataField;
 </script>
 
-{#if field.type === DataFieldType.Date && !field.repeated && value instanceof Date}
-  {Intl.DateTimeFormat("default", {
+{#if field.type === DataFieldType.Date && !field.repeated && isDate(value)}
+  {value.toPlainDateTime().toLocaleString("default", {
     year: "numeric",
     month: "numeric",
     day: "numeric",
-  }).format(value)}
+  })}
 {/if}
diff --git a/src/ui/components/CardMetadata/Datetime.svelte b/src/ui/components/CardMetadata/Datetime.svelte
index ed272094..04cdf005 100644
--- a/src/ui/components/CardMetadata/Datetime.svelte
+++ b/src/ui/components/CardMetadata/Datetime.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     DataFieldType,
+    isDate,
     type DataField,
     type DataValue,
     type Optional,
@@ -10,13 +11,13 @@
   export let field: DataField;
 </script>
 
-{#if field.type === DataFieldType.Date && !field.repeated && value instanceof Date}
-  {Intl.DateTimeFormat("default", {
+{#if field.type === DataFieldType.Date && !field.repeated && isDate(value)}
+  {value.toPlainDateTime().toLocaleString("default", {
     year: "numeric",
     month: "numeric",
     day: "numeric",
     hour: "numeric",
     minute: "numeric",
     hour12: false,
-  }).format(value)}
+  })}
 {/if}
diff --git a/src/ui/components/DateInput.svelte b/src/ui/components/DateInput.svelte
index e7ca4a42..3410eecf 100644
--- a/src/ui/components/DateInput.svelte
+++ b/src/ui/components/DateInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
 
   /**
    * Specifies the date value.
    */
-  export let value: Date | null;
+  export let value: Temporal.PlainDate | null;
 
   /**
    * Specifies whether to remove decorations so that it can be embedded in other
@@ -14,8 +14,8 @@
   export let embed: boolean = false;
 
   const dispatch = createEventDispatcher<{
-    change: Date | null;
-    input: Date | null;
+    change: Temporal.PlainDate | null;
+    input: Temporal.PlainDate | null;
   }>();
 
   function handleChange(event: Event) {
@@ -23,18 +23,19 @@
       dispatch(
         "change",
         event.currentTarget.value
-          ? dayjs(event.currentTarget.value).toDate()
+          ? Temporal.PlainDate.from(event.currentTarget.value)
           : null
       );
     }
   }
 
   function handleInput(event: Event) {
+    //TODO: compare and fix, datetime input seems not working w/o input event
     if (event.currentTarget instanceof HTMLInputElement) {
       dispatch(
         "input",
         event.currentTarget.value
-          ? dayjs(event.currentTarget.value).toDate()
+          ? Temporal.PlainDate.from(event.currentTarget.value)
           : null
       );
     }
@@ -44,7 +45,7 @@
 <input
   type="date"
   class:embed
-  value={value ? dayjs(value).format("YYYY-MM-DD") : null}
+  value={value ? value.toString() : null}
   max="9999-12-31"
   on:change={handleChange}
   on:input={handleInput}
diff --git a/src/ui/components/DatetimeInput.svelte b/src/ui/components/DatetimeInput.svelte
index 3276ef6e..42a92d58 100644
--- a/src/ui/components/DatetimeInput.svelte
+++ b/src/ui/components/DatetimeInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
 
   /**
    * Specifies the date time value.
    */
-  export let value: Date | null;
+  export let value: Temporal.PlainDateTime | null;
 
   /**
    * Specifies whether to remove decorations so that it can be embedded in other
@@ -14,8 +14,8 @@
   export let embed: boolean = false;
 
   const dispatch = createEventDispatcher<{
-    change: Date | null;
-    input: Date | null;
+    change: Temporal.PlainDateTime | null;
+    input: Temporal.PlainDateTime | null;
   }>();
 
   function handleChange(event: Event) {
@@ -23,7 +23,7 @@
       dispatch(
         "change",
         event.currentTarget.value
-          ? dayjs(event.currentTarget.value).toDate()
+          ? Temporal.PlainDateTime.from(event.currentTarget.value)
           : null
       );
     }
@@ -34,7 +34,7 @@
       dispatch(
         "input",
         event.currentTarget.value
-          ? dayjs(event.currentTarget.value).toDate()
+          ? Temporal.PlainDateTime.from(event.currentTarget.value)
           : null
       );
     }
@@ -44,7 +44,7 @@
 <input
   type="datetime-local"
   class:embed
-  value={value ? dayjs(value).format("YYYY-MM-DDTHH:mm") : null}
+  value={value ? value.toString({ smallestUnit: "minutes" }) : null}
   max="9999-12-31T23:59"
   on:change={handleChange}
   on:input={handleInput}
diff --git a/src/ui/components/FieldControl/FieldControl.svelte b/src/ui/components/FieldControl/FieldControl.svelte
index 19121ff7..974a1fd5 100644
--- a/src/ui/components/FieldControl/FieldControl.svelte
+++ b/src/ui/components/FieldControl/FieldControl.svelte
@@ -9,7 +9,7 @@
   } from "obsidian-svelte";
   import DateInput from "../DateInput.svelte";
   import DatetimeInput from "../DatetimeInput.svelte";
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
 
   import { TagList } from "src/ui/components/TagList";
   import {
@@ -26,7 +26,9 @@
 
   export let field: DataField;
   export let value: Optional<DataValue>;
-  let cachedValue: Optional<Date> = isDate(value) ? value : null; // store the proposing value
+  let cachedValue: Optional<Temporal.ZonedDateTime> = isDate(value)
+    ? value
+    : null; // store the proposing value
   export let onChange: (value: Optional<DataValue>) => void;
   export let readonly: boolean = false;
 
@@ -67,25 +69,56 @@
 {:else if field.type === DataFieldType.Date}
   {#if field.typeConfig?.time}
     <DatetimeInput
-      value={isDate(value) ? value : null}
-      on:input={({ detail: value }) => (cachedValue = value)}
+      value={isDate(value) ? value.toPlainDateTime() : null}
+      on:change={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+                hour: value.hour,
+                minute: value.minute,
+                second: value.second,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId()); // to local timezone
+        } else {
+          cachedValue = null;
+        }
+      }}
       on:blur={() => onChange(cachedValue)}
     />
   {:else}
     <DateInput
-      value={isDate(value) ? value : null}
-      on:change={({ detail: value }) => (cachedValue = value)}
+      value={isDate(value) ? value.toPlainDate() : null}
+      on:change={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId()); // to local timezone
+        } else {
+          cachedValue = null;
+        }
+      }}
       on:blur={() => {
         if (!cachedValue || !isDate(value)) {
           onChange(cachedValue);
           return;
         }
-        const cachedDate = dayjs(cachedValue);
-        const newDatetime = dayjs(value)
-          .set("year", cachedDate.year())
-          .set("month", cachedDate.month())
-          .set("date", cachedDate.date());
-        onChange(newDatetime.toDate());
+        onChange(
+          value.with({
+            year: cachedValue.year,
+            month: cachedValue.month,
+            day: cachedValue.day,
+            hour: cachedValue.hour,
+            minute: cachedValue.minute,
+            second: cachedValue.second,
+          })
+        );
       }}
     />
   {/if}
diff --git a/src/ui/modals/components/CreateField.svelte b/src/ui/modals/components/CreateField.svelte
index 29797e9e..9d7fd501 100644
--- a/src/ui/modals/components/CreateField.svelte
+++ b/src/ui/modals/components/CreateField.svelte
@@ -14,7 +14,6 @@
   } from "obsidian-svelte";
   import { TagsInput } from "src/ui/components/TagsInput";
   import MultiTextInput from "src/ui/components/MultiTextInput/MultiTextInput.svelte";
-  import dayjs from "dayjs";
   import {
     DataFieldType,
     type Optional,
@@ -25,6 +24,7 @@
   import { onMount } from "svelte";
   import DateInput from "src/ui/components/DateInput.svelte";
   import DatetimeInput from "src/ui/components/DatetimeInput.svelte";
+  import { Temporal } from "temporal-polyfill";
 
   export let existingFields: DataField[];
   export let defaultName: string;
@@ -40,7 +40,7 @@
 
   let value: Optional<DataValue> = ""; // text, number and boolean
   let listValue: string = "[]";
-  let dateValue: Optional<Date> = new Date();
+  let dateValue: Optional<Temporal.ZonedDateTime> = null;
 
   export let onCreate: (field: DataField, value: Optional<DataValue>) => void;
 
@@ -69,7 +69,8 @@
       [DataFieldType.String]: (v: string) => v,
       [DataFieldType.Number]: (v: number) => v.toString(),
       [DataFieldType.Boolean]: (v: boolean) => v.toString(),
-      [DataFieldType.Date]: (v: string) => v.toString(),
+      [DataFieldType.Date]: (v: string) =>
+        Temporal.PlainDate.from(v).toString(),
       [DataFieldType.List]: (v: Array<string>) => v.toString(),
       [DataFieldType.Unknown]: () => null,
     },
@@ -77,7 +78,8 @@
       [DataFieldType.String]: (v: string) => parseInt(v),
       [DataFieldType.Number]: (v: number) => v,
       [DataFieldType.Boolean]: (v: boolean) => (v ? 1 : 0),
-      [DataFieldType.Date]: (v: string) => dayjs(v).toDate().getTime(),
+      [DataFieldType.Date]: (v: string) =>
+        parseInt(Temporal.PlainDate.from(v).toString().replace(/-/g, "")), // 注意捕获错误
       [DataFieldType.List]: (v: Array<string>) => parseInt(v.toString()),
       [DataFieldType.Unknown]: () => null,
     },
@@ -90,12 +92,17 @@
       [DataFieldType.Unknown]: () => null,
     },
     [DataFieldType.Date]: {
-      [DataFieldType.String]: (v: string) => dayjs(v).format("YYYY-MM-DD"),
-      [DataFieldType.Number]: (v: number) => dayjs(v).format("YYYY-MM-DD"),
-      [DataFieldType.Boolean]: () => dayjs().format("YYYY-MM-DD"),
+      [DataFieldType.String]: (v: string) =>
+        Temporal.PlainDate.from(v).toString(),
+      [DataFieldType.Number]: (v: number) =>
+        (
+          Temporal.PlainDate.from(v.toString()) ??
+          Temporal.Instant.fromEpochMilliseconds(v)
+        ).toString(),
+      [DataFieldType.Boolean]: () => Temporal.Now.plainDateISO().toString(),
       [DataFieldType.Date]: (v: string) => v,
       [DataFieldType.List]: (v: Array<string>) =>
-        dayjs(v.toString()).format("YYYY-MM-DD"),
+        Temporal.PlainDate.from(v.toString()).toString(),
       [DataFieldType.Unknown]: () => null,
     },
     [DataFieldType.List]: {
@@ -117,11 +124,11 @@
   };
 
   function convert(
-    origValue: Optional<DataValue>,
+    oValue: Optional<DataValue>,
     from: DataFieldType,
     to: DataFieldType
   ) {
-    if (origValue === undefined || origValue === null) {
+    if (oValue === undefined || oValue === null) {
       return null;
     }
 
@@ -132,23 +139,24 @@
       from === DataFieldType.List ||
       from === DataFieldType.Date
     ) {
-      return origValue;
+      return oValue;
     }
 
-    return conversions[to][from](origValue);
+    return conversions[to][from](oValue); //TODO: add error handling
   }
 
   function handleTypeChange(event: CustomEvent<string>) {
     const from = field.type;
     const to = event.detail as DataFieldType;
     if (to === DataFieldType.List) {
+      value = convert(value, from, to) ?? null; // check this line?
       field = {
         ...field,
         type: to,
         repeated: true,
       };
     } else {
-      value = convert(value, from, to);
+      value = convert(value, from, to) ?? null;
       field = {
         ...field,
         type: to,
@@ -266,16 +274,39 @@
       {:else if field.type === DataFieldType.Date}
         {#if field.typeConfig?.time}
           <DatetimeInput
-            value={dateValue ?? new Date()}
+            value={dateValue?.toPlainDateTime() ?? null}
             on:input={({ detail: value }) => {
-              dateValue = value;
+              if (value) {
+                dateValue = dateValue
+                  ? dateValue.with({
+                      year: value.year,
+                      month: value.month,
+                      day: value.day,
+                      hour: value.hour,
+                      minute: value.minute,
+                      second: value.second,
+                    })
+                  : value.toZonedDateTime(Temporal.Now.timeZoneId());
+              } else {
+                dateValue = null;
+              }
             }}
           />
         {:else}
           <DateInput
-            value={dateValue ?? new Date()}
+            value={dateValue?.toPlainDate() ?? null}
             on:input={({ detail: value }) => {
-              dateValue = value;
+              if (value) {
+                dateValue = dateValue
+                  ? dateValue.with({
+                      year: value.year,
+                      month: value.month,
+                      day: value.day,
+                    })
+                  : value.toZonedDateTime(Temporal.Now.timeZoneId());
+              } else {
+                dateValue = null;
+              }
             }}
           />
         {/if}
@@ -334,10 +365,15 @@
         } else if (field.type === DataFieldType.Date) {
           onCreate(
             field,
-            // If no date(time) value specified still add today's date / current time
-            dayjs(dateValue ?? "").format(
-              field.typeConfig?.time ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD"
-            )
+            field.typeConfig?.time
+              ? dateValue
+                ? dateValue
+                    .toPlainDateTime()
+                    .toString({ smallestUnit: "minutes" })
+                : null
+              : dateValue
+                ? dateValue.toPlainDate().toString()
+                : null
           );
         } else if (field.type === DataFieldType.String) {
           // uniquify options items and omit empty
diff --git a/src/ui/views/Calendar/CalendarView.svelte b/src/ui/views/Calendar/CalendarView.svelte
index 96601292..eb25fab2 100644
--- a/src/ui/views/Calendar/CalendarView.svelte
+++ b/src/ui/views/Calendar/CalendarView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
   import { Notice } from "obsidian";
   import { Select, Typography } from "obsidian-svelte";
   import { createDataRecord } from "src/lib/dataApi";
@@ -62,7 +62,7 @@
 
   $: ({ fields, records } = frame);
 
-  let anchorDate: dayjs.Dayjs = dayjs();
+  let anchorDate: Temporal.PlainDate = Temporal.Now.plainDateISO();
 
   $: dateFields = fields
     .filter((field) => !field.repeated)
@@ -106,18 +106,17 @@
     saveConfig({ ...config, checkField });
   }
 
-  function handleRecordChange(date: dayjs.Dayjs, record: DataRecord) {
+  function handleRecordChange(date: Temporal.PlainDate, record: DataRecord) {
     if (dateField) {
       if (dateField.type === DataFieldType.Date) {
-        const newDatetime = dayjs(record.values[dateField.name] as string)
-          .set("year", date.year())
-          .set("month", date.month())
-          .set("date", date.date());
+        const newDatetime = Temporal.PlainDateTime.from(
+          record.values[dateField.name] as string
+        ).with({ year: date.year, month: date.month, day: date.day }); //check intension here
         api.updateRecord(
           updateRecordValues(record, {
-            [dateField.name]: newDatetime.format(
-              dateField.typeConfig?.time ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD"
-            ),
+            [dateField.name]: dateField.typeConfig?.time
+              ? newDatetime.toString({ smallestUnit: "minute" })
+              : newDatetime.toPlainDate().toString(),
           }),
           fields
         );
@@ -149,7 +148,7 @@
     }
   }
 
-  function handleRecordAdd(date: dayjs.Dayjs) {
+  function handleRecordAdd(date: Temporal.PlainDate) {
     if (!dateField) {
       new Notice("Select a Date field to create calendar events.");
       return;
@@ -164,7 +163,7 @@
       if (dateField) {
         api.addRecord(
           createDataRecord(name, project, {
-            [dateField.name]: date.toDate(),
+            [dateField.name]: date.toZonedDateTime(Temporal.Now.timeZoneId()),
           }),
           fields,
           templatePath
@@ -183,7 +182,7 @@
         slot="left"
         onNext={() => (anchorDate = addInterval(anchorDate, interval))}
         onPrevious={() => (anchorDate = subtractInterval(anchorDate, interval))}
-        onToday={() => (anchorDate = dayjs())}
+        onToday={() => (anchorDate = Temporal.Now.plainDateISO())}
       />
       <Typography slot="middle" variant="h2" nomargin>{title}</Typography>
       <svelte:fragment slot="right">
@@ -249,10 +248,14 @@
         {#each weekDays as weekDay}
           <Weekday
             width={100 / weekDays.length}
-            weekend={weekDay.day() === 0 || weekDay.day() === 6}
+            weekend={weekDay.dayOfWeek % 7 === 0 || weekDay.dayOfWeek === 6}
           >
             {$i18n.t("views.calendar.weekday", {
-              value: weekDay.toDate(),
+              value: new Date(
+                weekDay.toZonedDateTime(
+                  Temporal.Now.timeZoneId()
+                ).epochMilliseconds
+              ), // bug may arise here, use local Date variable
               formatParams: {
                 value: { weekday: "short" },
               },
@@ -267,7 +270,7 @@
               width={100 / week.length}
               {date}
               checkField={booleanField?.name}
-              records={groupedRecords[date.format("YYYY-MM-DD")] || []}
+              records={groupedRecords[date.toString()] || []}
               onRecordClick={handleRecordClick}
               onRecordChange={(record) => {
                 handleRecordChange(date, record);
diff --git a/src/ui/views/Calendar/calendar.ts b/src/ui/views/Calendar/calendar.ts
index de987b17..f7331180 100644
--- a/src/ui/views/Calendar/calendar.ts
+++ b/src/ui/views/Calendar/calendar.ts
@@ -1,5 +1,5 @@
-import dayjs from "dayjs";
 import { get } from "svelte/store";
+import { Temporal } from "temporal-polyfill";
 
 import { isDate, type DataRecord } from "src/lib/dataframe/dataframe";
 import { i18n } from "src/lib/stores/i18n";
@@ -21,39 +21,41 @@ export function isCalendarInterval(value: string): value is CalendarInterval {
   }
 }
 
-export function addInterval(
-  date: dayjs.Dayjs,
+export function addInterval( 
+  // scroll interaction
+  date: Temporal.PlainDate,
   interval: CalendarInterval
-): dayjs.Dayjs {
+): Temporal.PlainDate {
   switch (interval) {
     case "month":
-      return date.add(1, "month");
+      return date.add({ months: 1 });
     case "2weeks":
-      return date.add(2, "week");
+      return date.add({ weeks: 2 });
     case "week":
-      return date.add(1, "week");
+      return date.add({ weeks: 1 });
     case "3days":
-      return date.add(1, "day");
+      return date.add({ days: 1 });
     case "day":
-      return date.add(1, "day");
+      return date.add({ days: 1 });
   }
 }
 
 export function subtractInterval(
-  date: dayjs.Dayjs,
+  // scroll interaction
+  date: Temporal.PlainDate,
   interval: CalendarInterval
-): dayjs.Dayjs {
+): Temporal.PlainDate {
   switch (interval) {
     case "month":
-      return date.subtract(1, "month");
+      return date.subtract({ months: 1 });
     case "2weeks":
-      return date.subtract(2, "week");
+      return date.subtract({ weeks: 2 });
     case "week":
-      return date.subtract(1, "week");
+      return date.subtract({ weeks: 1 });
     case "3days":
-      return date.subtract(1, "day");
+      return date.subtract({ days: 1 });
     case "day":
-      return date.subtract(1, "day");
+      return date.subtract({ days: 1 });
   }
 }
 
@@ -66,14 +68,10 @@ export function groupRecordsByField(
   records.forEach((record) => {
     const dateValue = record.values[field];
 
-    const start = dateValue
-      ? isDate(dateValue)
-        ? dayjs(dateValue)
-        : null
-      : null;
+    const start = dateValue ? (isDate(dateValue) ? dateValue : null) : null;
 
     if (start) {
-      const dateStr = start.format("YYYY-MM-DD");
+      const dateStr = start.toPlainDate().toString();
       if (!(dateStr in res)) {
         res[dateStr] = [];
       }
@@ -86,45 +84,63 @@ export function groupRecordsByField(
 }
 
 export function computeDateInterval(
-  anchor: dayjs.Dayjs,
+  anchor: Temporal.PlainDate,
   interval: CalendarInterval,
   firstDayOfWeek: number
-): [dayjs.Dayjs, dayjs.Dayjs] {
+): [Temporal.PlainDate, Temporal.PlainDate] {
   const sow = startOfWeek(anchor, firstDayOfWeek);
   const eow = endOfWeek(anchor, firstDayOfWeek);
   switch (interval) {
     case "month":
       return [
-        startOfWeek(anchor.startOf("month"), firstDayOfWeek),
-        endOfWeek(anchor.endOf("month"), firstDayOfWeek),
+        startOfWeek(anchor.with({ day: 1 }), firstDayOfWeek),
+        endOfWeek(anchor.with({ day: anchor.daysInMonth }), firstDayOfWeek),
       ];
     case "2weeks":
-      return [sow, eow.add(1, "week")];
+      return [sow, eow.add({ weeks: 1 })];
     case "week":
       return [sow, eow];
     case "3days":
-      return [anchor, anchor.add(2, "days")];
+      return [anchor, anchor.add({ days: 2 })];
     case "day":
       return [anchor, anchor];
   }
 }
 
-export function generateTitle(dateInterval: [dayjs.Dayjs, dayjs.Dayjs]) {
-  if (dateInterval[0].startOf("day").isSame(dateInterval[1].startOf("day"))) {
+export function generateTitle(
+  dateInterval: [Temporal.PlainDate, Temporal.PlainDate]
+) {
+  if (dateInterval[0].equals(dateInterval[1])) {
     return get(i18n).t("views.calendar.date", {
-      value: dateInterval[0],
+      value: new Date(
+        dateInterval[0].toZonedDateTime(
+          Temporal.Now.timeZoneId()
+        ).epochMilliseconds
+      ),
       formatParams: {
         value: { year: "numeric", month: "long", day: "numeric" },
       },
     });
   }
 
-  if (dateInterval[0].startOf("year").isSame(dateInterval[1].startOf("year"))) {
+  if (dateInterval[0].year === dateInterval[1].year) {
     return get(i18n).t("views.calendar.interval", {
-      from: dateInterval[0],
-      to: dateInterval[1],
+      from: new Date(
+        dateInterval[0].toZonedDateTime(
+          Temporal.Now.timeZoneId()
+        ).epochMilliseconds
+      ),
+      to: new Date(
+        dateInterval[1].toZonedDateTime(
+          Temporal.Now.timeZoneId()
+        ).epochMilliseconds
+      ),
       en_separator: ", ",
-      custom_year: dateInterval[0],
+      custom_year: new Date(
+        dateInterval[0].toZonedDateTime(
+          Temporal.Now.timeZoneId()
+        ).epochMilliseconds
+      ),
       formatParams: {
         from: { month: "short", day: "numeric" },
         to: { month: "short", day: "numeric" },
@@ -134,8 +150,16 @@ export function generateTitle(dateInterval: [dayjs.Dayjs, dayjs.Dayjs]) {
   }
 
   return get(i18n).t("views.calendar.interval", {
-    from: dateInterval[0],
-    to: dateInterval[1],
+    from: new Date(
+      dateInterval[0].toZonedDateTime(
+        Temporal.Now.timeZoneId()
+      ).epochMilliseconds
+    ),
+    to: new Date(
+      dateInterval[1].toZonedDateTime(
+        Temporal.Now.timeZoneId()
+      ).epochMilliseconds
+    ),
     en_separator: "",
     custom_year: "",
     formatParams: {
@@ -147,24 +171,24 @@ export function generateTitle(dateInterval: [dayjs.Dayjs, dayjs.Dayjs]) {
 }
 
 export function generateDates(
-  dateInterval: [dayjs.Dayjs, dayjs.Dayjs]
-): dayjs.Dayjs[] {
-  const dates: dayjs.Dayjs[] = [];
+  dateInterval: [Temporal.PlainDate, Temporal.PlainDate]
+): Temporal.PlainDate[] {
+  const dates: Temporal.PlainDate[] = [];
 
-  const numDays = dateInterval[1].diff(dateInterval[0], "days");
+  const numDays = dateInterval[0].until(dateInterval[1]).days;
 
   for (let i = 0; i <= numDays; i++) {
-    dates.push(dateInterval[0].add(i, "day"));
+    dates.push(dateInterval[0].add({ days: i }));
   }
 
   return dates;
 }
 
 export function chunkDates(
-  dates: dayjs.Dayjs[],
+  dates: Temporal.PlainDate[],
   chunks: number
-): dayjs.Dayjs[][] {
-  const chunkedDates: dayjs.Dayjs[][] = [];
+): Temporal.PlainDate[][] {
+  const chunkedDates: Temporal.PlainDate[][] = [];
 
   let rest = dates;
   while (rest.length) {
@@ -191,19 +215,19 @@ function take<T>(arr: Array<T>, num: number): Array<T> {
 }
 
 export function startOfWeek(
-  date: dayjs.Dayjs,
+  date: Temporal.PlainDate,
   firstDayOfWeek: number
-): dayjs.Dayjs {
-  const offset = (7 + date.day() - firstDayOfWeek) % 7;
-  return date.subtract(offset, "days");
+): Temporal.PlainDate {
+  const offset = (7 + date.dayOfWeek - firstDayOfWeek) % 7;
+  return date.subtract({ days: offset });
 }
 
 export function endOfWeek(
-  date: dayjs.Dayjs,
+  date: Temporal.PlainDate,
   firstDayOfWeek: number
-): dayjs.Dayjs {
-  const offset = (firstDayOfWeek + 6 - date.day()) % 7;
-  return date.add(offset, "days");
+): Temporal.PlainDate {
+  const offset = (firstDayOfWeek + 6 - date.dayOfWeek) % 7;
+  return date.add({ days: offset });
 }
 
 export type LocaleOption = "system" | "obsidian";
diff --git a/src/ui/views/Calendar/components/Calendar/Day.svelte b/src/ui/views/Calendar/components/Calendar/Day.svelte
index fb2547bc..e62af96e 100644
--- a/src/ui/views/Calendar/components/Calendar/Day.svelte
+++ b/src/ui/views/Calendar/components/Calendar/Day.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import dayjs from "dayjs";
+  import { Temporal } from "temporal-polyfill";
   import { Menu } from "obsidian";
   import type { DataRecord } from "src/lib/dataframe/dataframe";
   import { i18n } from "src/lib/stores/i18n";
@@ -10,7 +10,7 @@
   /**
    * Specifies the date of the day.
    */
-  export let date: dayjs.Dayjs;
+  export let date: Temporal.PlainDate;
 
   /**
    * Specifies the width of the day div.
@@ -47,8 +47,8 @@
    */
   export let onRecordAdd: () => void;
 
-  $: weekend = date.day() === 0 || date.day() === 6;
-  $: today = date.startOf("day").isSame(dayjs().startOf("day"));
+  $: weekend = date.dayOfWeek % 7 === 0 || date.dayOfWeek === 6;
+  $: today = date.equals(Temporal.Now.plainDateISO());
 
   function handleDblClick(event: MouseEvent) {
     onRecordAdd();
@@ -73,7 +73,7 @@
   on:mousedown={handleMouseDown}
   style:width={width + "%"}
 >
-  <Date {today}>{date.date()}</Date>
+  <Date {today}>{date.day}</Date>
   <EventList
     {checkField}
     {records}
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
index e4424664..95245ff3 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
+++ b/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
@@ -3,15 +3,15 @@
   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";
+  import { Temporal } from "temporal-polyfill";
 
   import { GridCell } from "..";
   import { TextLabel } from "..";
   import type { GridColDef } from "../../dataGrid";
 
-  export let value: Optional<Date>;
-  let cachedValue: Optional<Date> = value; // store the proposing value
-  export let onChange: (value: Optional<Date>) => void;
+  export let value: Optional<Temporal.ZonedDateTime>;
+  let cachedValue: Optional<Temporal.ZonedDateTime> = value; // store the proposing value
+  export let onChange: (value: Optional<Temporal.ZonedDateTime>) => void;
   export let column: GridColDef;
   export let rowindex: number;
   export let colindex: number;
@@ -34,11 +34,12 @@
   onCopy={() => {
     if (value) {
       navigator.clipboard.writeText(
-        new Intl.DateTimeFormat("default", {
-          year: "numeric",
-          month: "numeric",
-          day: "numeric",
-        }).format(value)
+        value.toPlainDate().toString()
+        // new Intl.DateTimeFormat("default", {
+        //   year: "numeric",
+        //   month: "numeric",
+        //   day: "numeric",
+        // }).format(value)
       );
     }
   }}
@@ -46,30 +47,56 @@
   <svelte:fragment slot="read">
     {#if value}
       <TextLabel
-        value={new Intl.DateTimeFormat("default", {
+        value={value.toPlainDate().toLocaleString("default", {
           year: "numeric",
           month: "numeric",
           day: "numeric",
-        }).format(value)}
+        })}
       />
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="edit">
     <DateInput
-      value={value ?? null}
-      on:change={({ detail }) => (cachedValue = detail)}
+      value={value?.toPlainDate() ?? null}
+      on:change={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
+        } else {
+          cachedValue = null;
+        }
+      }}
+      on:input={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
+        } else {
+          cachedValue = null;
+        }
+      }}
       on:blur={() => {
         edit = false;
         if (!cachedValue || !isDate(value)) {
           onChange(cachedValue);
           return;
         }
-        const cachedDate = dayjs(cachedValue);
-        const newDatetime = dayjs(value)
-          .set("year", cachedDate.year())
-          .set("month", cachedDate.month())
-          .set("date", cachedDate.date());
-        onChange(newDatetime.toDate());
+        onChange(
+          value.with({
+            year: cachedValue.year,
+            month: cachedValue.month,
+            day: cachedValue.day,
+          })
+        );
       }}
       embed
     />
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
index 1efe6d20..f5ec3733 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
+++ b/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
   import DatetimeInput from "src/ui/components/DatetimeInput.svelte";
   // import { DatetimeInput } from "obsidian-svelte";
+  import { isDate } from "src/lib/dataframe/dataframe";
   import type { Optional } from "src/lib/dataframe/dataframe";
 
   import { GridCell } from "..";
   import { TextLabel } from "..";
   import type { GridColDef } from "../../dataGrid";
+  import { Temporal } from "temporal-polyfill";
 
-  export let value: Optional<Date>;
-  let cachedValue: Optional<Date> = value; // store the proposing value
-  export let onChange: (value: Optional<Date>) => void;
+  export let value: Optional<Temporal.ZonedDateTime>;
+  let cachedValue: Optional<Temporal.ZonedDateTime> = value; // store the proposing value
+  export let onChange: (value: Optional<Temporal.ZonedDateTime>) => void;
   export let column: GridColDef;
   export let rowindex: number;
   export let colindex: number;
@@ -32,14 +34,9 @@
   onCopy={() => {
     if (value) {
       navigator.clipboard.writeText(
-        new Intl.DateTimeFormat("default", {
-          year: "numeric",
-          month: "numeric",
-          day: "numeric",
-          hour: "numeric",
-          minute: "numeric",
-          hour12: false,
-        }).format(value)
+        value.toPlainDateTime().toString({ smallestUnit: "minute" })
+        // TODO: human friendly or machine friendly?
+        // handle on paste
       );
     }
   }}
@@ -47,24 +44,68 @@
   <svelte:fragment slot="read">
     {#if value}
       <TextLabel
-        value={new Intl.DateTimeFormat("default", {
+        value={value.toPlainDateTime().toLocaleString("default", {
           year: "numeric",
           month: "numeric",
           day: "numeric",
           hour: "numeric",
           minute: "numeric",
           hour12: false,
-        }).format(value)}
+        })}
       />
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="edit">
     <DatetimeInput
-      value={value ?? null}
-      on:input={({ detail }) => (cachedValue = detail)}
+      value={value?.toPlainDateTime() ?? null}
+      on:change={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+                hour: value.hour,
+                minute: value.minute,
+                second: value.second,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
+        } else {
+          cachedValue = null;
+        }
+      }}
+      on:input={({ detail: value }) => {
+        if (value) {
+          cachedValue = cachedValue
+            ? cachedValue.with({
+                year: value.year,
+                month: value.month,
+                day: value.day,
+                hour: value.hour,
+                minute: value.minute,
+                second: value.second,
+              })
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
+        } else {
+          cachedValue = null;
+        }
+      }}
       on:blur={() => {
         edit = false;
-        onChange(cachedValue);
+        if (!cachedValue || !isDate(value)) {
+          onChange(cachedValue);
+          return;
+        }
+        onChange(
+          value.with({
+            year: cachedValue.year,
+            month: cachedValue.month,
+            day: cachedValue.day,
+            hour: cachedValue.hour,
+            minute: cachedValue.minute,
+            second: cachedValue.second,
+          })
+        );
       }}
       embed
     />

From e01e1e047b38d375aa7ca0cfec066e6dd8e3ccbc Mon Sep 17 00:00:00 2001
From: Chiyu Liang <532117255@qq.com>
Date: Mon, 3 Feb 2025 23:03:46 -0500
Subject: [PATCH 04/10] Fix utc unused

---
 src/lib/dataApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/dataApi.ts b/src/lib/dataApi.ts
index 75c94530..4774e642 100644
--- a/src/lib/dataApi.ts
+++ b/src/lib/dataApi.ts
@@ -196,7 +196,7 @@ export function doUpdateRecord(
                 entry[1].offset !== Temporal.Now.zonedDateTimeISO().offset; // default "+08:00" comparing to "-05:00"
 
               // const hasOffset =
-              const utc = entry[1].timeZoneId === "UTC";
+              // const utc = entry[1].timeZoneId === "UTC";
               //TODO; format with Z mark, seems hard to do w/0 third-party libs
 
               return produce(entry, (draft) => {

From 08cbcef10a1283558b54c4670398dd80a2dd41ad Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 13:01:35 -0500
Subject: [PATCH 05/10] Calendar view & timezone

- Ensure events display on the correct date, considering timezone
- Persist DnD date correctly in calendar view, considering timezone
---
 src/ui/views/Calendar/CalendarView.svelte | 41 +++++++++++++++--------
 src/ui/views/Calendar/calendar.ts         |  5 ++-
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/ui/views/Calendar/CalendarView.svelte b/src/ui/views/Calendar/CalendarView.svelte
index eb25fab2..8afa7d88 100644
--- a/src/ui/views/Calendar/CalendarView.svelte
+++ b/src/ui/views/Calendar/CalendarView.svelte
@@ -5,6 +5,7 @@
   import { createDataRecord } from "src/lib/dataApi";
   import {
     DataFieldType,
+    isDate,
     type DataFrame,
     type DataRecord,
   } from "src/lib/dataframe/dataframe";
@@ -107,20 +108,32 @@
   }
 
   function handleRecordChange(date: Temporal.PlainDate, record: DataRecord) {
-    if (dateField) {
-      if (dateField.type === DataFieldType.Date) {
-        const newDatetime = Temporal.PlainDateTime.from(
-          record.values[dateField.name] as string
-        ).with({ year: date.year, month: date.month, day: date.day }); //check intension here
-        api.updateRecord(
-          updateRecordValues(record, {
-            [dateField.name]: dateField.typeConfig?.time
-              ? newDatetime.toString({ smallestUnit: "minute" })
-              : newDatetime.toPlainDate().toString(),
-          }),
-          fields
-        );
-      }
+    if (dateField?.type !== DataFieldType.Date) return;
+
+    const recordDate = record.values[dateField.name];
+    if (!isDate(recordDate)) return;
+
+    const localTz = Temporal.Now.timeZoneId();
+
+    if (
+      recordDate.offset !== Temporal.Now.zonedDateTimeISO().offset ||
+      recordDate.timeZoneId !== localTz // TODO: check DST
+    ) {
+      const displayNewDateTime = date
+        .toZonedDateTime(localTz)
+        .withPlainTime(recordDate.withTimeZone(localTz));
+      const writeBackNewDateTime = displayNewDateTime.withTimeZone(recordDate);
+
+      api.updateRecord(
+        updateRecordValues(record, { [dateField.name]: writeBackNewDateTime }),
+        fields
+      );
+    } else {
+      const newDateTime = recordDate.withPlainDate(date);
+      api.updateRecord(
+        updateRecordValues(record, { [dateField.name]: newDateTime }),
+        fields
+      );
     }
   }
 
diff --git a/src/ui/views/Calendar/calendar.ts b/src/ui/views/Calendar/calendar.ts
index f7331180..6661eb9a 100644
--- a/src/ui/views/Calendar/calendar.ts
+++ b/src/ui/views/Calendar/calendar.ts
@@ -71,7 +71,10 @@ export function groupRecordsByField(
     const start = dateValue ? (isDate(dateValue) ? dateValue : null) : null;
 
     if (start) {
-      const dateStr = start.toPlainDate().toString();
+      const dateStr = start
+        .withTimeZone(Temporal.Now.timeZoneId())
+        .toPlainDate()
+        .toString();
       if (!(dateStr in res)) {
         res[dateStr] = [];
       }

From bf8a7bee4c5536fad12448bf42b53a72a4803fe6 Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 13:10:01 -0500
Subject: [PATCH 06/10] Simplify with() update

---
 .../FieldControl/FieldControl.svelte          | 30 ++++---------------
 src/ui/modals/components/CreateField.svelte   | 15 ++--------
 .../GridCell/GridDateCell/GridDateCell.svelte | 20 ++-----------
 .../GridDatetimeCell/GridDatetimeCell.svelte  | 29 ++----------------
 4 files changed, 13 insertions(+), 81 deletions(-)

diff --git a/src/ui/components/FieldControl/FieldControl.svelte b/src/ui/components/FieldControl/FieldControl.svelte
index 974a1fd5..bf681c05 100644
--- a/src/ui/components/FieldControl/FieldControl.svelte
+++ b/src/ui/components/FieldControl/FieldControl.svelte
@@ -73,15 +73,8 @@
       on:change={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-                hour: value.hour,
-                minute: value.minute,
-                second: value.second,
-              })
-            : value.toZonedDateTime(Temporal.Now.timeZoneId()); // to local timezone
+            ? cachedValue.withPlainDate(value).withPlainTime(value)
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
         }
@@ -94,12 +87,8 @@
       on:change={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-              })
-            : value.toZonedDateTime(Temporal.Now.timeZoneId()); // to local timezone
+            ? cachedValue.withPlainDate(value)
+            : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
         }
@@ -109,16 +98,7 @@
           onChange(cachedValue);
           return;
         }
-        onChange(
-          value.with({
-            year: cachedValue.year,
-            month: cachedValue.month,
-            day: cachedValue.day,
-            hour: cachedValue.hour,
-            minute: cachedValue.minute,
-            second: cachedValue.second,
-          })
-        );
+        onChange(value.withPlainDate(cachedValue).withPlainTime(cachedValue));
       }}
     />
   {/if}
diff --git a/src/ui/modals/components/CreateField.svelte b/src/ui/modals/components/CreateField.svelte
index 9d7fd501..352f18f2 100644
--- a/src/ui/modals/components/CreateField.svelte
+++ b/src/ui/modals/components/CreateField.svelte
@@ -278,14 +278,7 @@
             on:input={({ detail: value }) => {
               if (value) {
                 dateValue = dateValue
-                  ? dateValue.with({
-                      year: value.year,
-                      month: value.month,
-                      day: value.day,
-                      hour: value.hour,
-                      minute: value.minute,
-                      second: value.second,
-                    })
+                  ? dateValue.withPlainDate(value).withPlainTime(value)
                   : value.toZonedDateTime(Temporal.Now.timeZoneId());
               } else {
                 dateValue = null;
@@ -298,11 +291,7 @@
             on:input={({ detail: value }) => {
               if (value) {
                 dateValue = dateValue
-                  ? dateValue.with({
-                      year: value.year,
-                      month: value.month,
-                      day: value.day,
-                    })
+                  ? dateValue.withPlainDate(value)
                   : value.toZonedDateTime(Temporal.Now.timeZoneId());
               } else {
                 dateValue = null;
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
index 95245ff3..27930e4c 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
+++ b/src/ui/views/Table/components/DataGrid/GridCell/GridDateCell/GridDateCell.svelte
@@ -61,11 +61,7 @@
       on:change={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-              })
+            ? cachedValue.withPlainDate(value)
             : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
@@ -74,11 +70,7 @@
       on:input={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-              })
+            ? cachedValue.withPlainDate(value)
             : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
@@ -90,13 +82,7 @@
           onChange(cachedValue);
           return;
         }
-        onChange(
-          value.with({
-            year: cachedValue.year,
-            month: cachedValue.month,
-            day: cachedValue.day,
-          })
-        );
+        onChange(value.withPlainDate(cachedValue));
       }}
       embed
     />
diff --git a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte b/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
index f5ec3733..6ac18708 100644
--- a/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
+++ b/src/ui/views/Table/components/DataGrid/GridCell/GridDatetimeCell/GridDatetimeCell.svelte
@@ -61,14 +61,7 @@
       on:change={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-                hour: value.hour,
-                minute: value.minute,
-                second: value.second,
-              })
+            ? cachedValue.withPlainDate(value).withPlainTime(value)
             : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
@@ -77,14 +70,7 @@
       on:input={({ detail: value }) => {
         if (value) {
           cachedValue = cachedValue
-            ? cachedValue.with({
-                year: value.year,
-                month: value.month,
-                day: value.day,
-                hour: value.hour,
-                minute: value.minute,
-                second: value.second,
-              })
+            ? cachedValue.withPlainDate(value).withPlainTime(value)
             : value.toZonedDateTime(Temporal.Now.timeZoneId());
         } else {
           cachedValue = null;
@@ -96,16 +82,7 @@
           onChange(cachedValue);
           return;
         }
-        onChange(
-          value.with({
-            year: cachedValue.year,
-            month: cachedValue.month,
-            day: cachedValue.day,
-            hour: cachedValue.hour,
-            minute: cachedValue.minute,
-            second: cachedValue.second,
-          })
-        );
+        onChange(value.withPlainDate(cachedValue).withPlainTime(cachedValue));
       }}
       embed
     />

From 420420bf645ea09b88ee8a566932ffd4e5db4754 Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 13:11:25 -0500
Subject: [PATCH 07/10] Clean up

---
 src/ui/views/Calendar/calendar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/views/Calendar/calendar.ts b/src/ui/views/Calendar/calendar.ts
index 6661eb9a..a1bb48c3 100644
--- a/src/ui/views/Calendar/calendar.ts
+++ b/src/ui/views/Calendar/calendar.ts
@@ -21,7 +21,7 @@ export function isCalendarInterval(value: string): value is CalendarInterval {
   }
 }
 
-export function addInterval( 
+export function addInterval(
   // scroll interaction
   date: Temporal.PlainDate,
   interval: CalendarInterval

From 3773102a5ab957fed88e1c27bcd785fbe9ecc767 Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 15:22:07 -0500
Subject: [PATCH 08/10] Update dataApi.ts

---
 src/lib/dataApi.ts | 48 ++++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/lib/dataApi.ts b/src/lib/dataApi.ts
index 4774e642..f1f972f1 100644
--- a/src/lib/dataApi.ts
+++ b/src/lib/dataApi.ts
@@ -181,38 +181,44 @@ export function doUpdateRecord(
         Object.entries({ ...frontmatter, ...record.values })
           .map((entry) => {
             if (isDate(entry[1])) {
+              const [, dateValue] = entry;
+
               const hasTime = fields.some(
                 (field) =>
                   field.name === entry[0] &&
                   field.type === DataFieldType.Date &&
                   (field.typeConfig?.time ||
-                    entry[1].hour ||
-                    entry[1].minute ||
-                    entry[1].second)
+                    dateValue.hour ||
+                    dateValue.minute ||
+                    dateValue.second ||
+                    dateValue.millisecond)
               );
 
-              const zoned =
-                entry[1].timeZoneId !== Temporal.Now.timeZoneId() && // default "+08:00" comparing to "America/New York"
-                entry[1].offset !== Temporal.Now.zonedDateTimeISO().offset; // default "+08:00" comparing to "-05:00"
-
-              // const hasOffset =
-              // const utc = entry[1].timeZoneId === "UTC";
-              //TODO; format with Z mark, seems hard to do w/0 third-party libs
+              const isZoned =
+                dateValue.timeZoneId !== Temporal.Now.timeZoneId() &&
+                dateValue.offset !== Temporal.Now.zonedDateTimeISO().offset;
 
               return produce(entry, (draft) => {
-                draft[1] = hasTime
-                  ? zoned
-                    ? (entry[1] as Temporal.ZonedDateTime).toString({
-                        smallestUnit: "minute",
-                        offset: "auto",
-                        timeZoneName: "never",
-                      })
-                    : (entry[1] as Temporal.ZonedDateTime)
+                if (hasTime && isZoned) {
+                  draft[1] =
+                    dateValue.timeZoneId === "UTC" // The original raw string ends with "Z"
+                      ? dateValue.toString({
+                          smallestUnit: "minute",
+                          offset: "never",
+                          timeZoneName: "never",
+                        }) + "Z"
+                      : dateValue.toString({
+                          smallestUnit: "minute",
+                          offset: "auto",
+                          timeZoneName: "never",
+                        });
+                } else {
+                  draft[1] = hasTime
+                    ? dateValue
                         .toPlainDateTime()
                         .toString({ smallestUnit: "minute" })
-                  : (entry[1] as Temporal.ZonedDateTime)
-                      .toPlainDate()
-                      .toString();
+                    : (draft[1] = dateValue.toPlainDate().toString());
+                }
               });
             }
             return entry;

From 291560f4ad72ff739088bb8391fb92962ae03925 Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 18:45:26 -0500
Subject: [PATCH 09/10] Fix touching time part with DateInput

---
 src/ui/components/FieldControl/FieldControl.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/components/FieldControl/FieldControl.svelte b/src/ui/components/FieldControl/FieldControl.svelte
index bf681c05..1e8aa853 100644
--- a/src/ui/components/FieldControl/FieldControl.svelte
+++ b/src/ui/components/FieldControl/FieldControl.svelte
@@ -98,7 +98,7 @@
           onChange(cachedValue);
           return;
         }
-        onChange(value.withPlainDate(cachedValue).withPlainTime(cachedValue));
+        onChange(value.withPlainDate(cachedValue));
       }}
     />
   {/if}

From 196a7eef1a89cc4dff661461714d34cf29fb1b6b Mon Sep 17 00:00:00 2001
From: Acylation <532117255@qq.com>
Date: Mon, 24 Feb 2025 18:46:07 -0500
Subject: [PATCH 10/10] Clean up

---
 src/lib/datasources/helpers.test.ts           |  2 +
 src/lib/datasources/helpers.ts                | 11 ++---
 src/ui/app/filterFunctions.ts                 | 46 +++++++++----------
 .../viewOptions/color/ColorOptions.svelte     |  6 +--
 .../viewOptions/filter/FilterOptions.svelte   |  3 +-
 5 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/lib/datasources/helpers.test.ts b/src/lib/datasources/helpers.test.ts
index 8a94b7a4..2a09f0ef 100644
--- a/src/lib/datasources/helpers.test.ts
+++ b/src/lib/datasources/helpers.test.ts
@@ -172,6 +172,8 @@ describe("detectCellType", () => {
     // Complex values.
     ["2022-01-01", DataFieldType.Date],
     ["2022-01-01T22:35", DataFieldType.Date],
+    ["2022-01-01T22:35Z", DataFieldType.Date],
+    ["2022-01-01T22:35+02:00", DataFieldType.Date],
     [{ my: "object" }, DataFieldType.Unknown],
   ];
 
diff --git a/src/lib/datasources/helpers.ts b/src/lib/datasources/helpers.ts
index a4bf0a54..ae3bb6a6 100644
--- a/src/lib/datasources/helpers.ts
+++ b/src/lib/datasources/helpers.ts
@@ -47,7 +47,7 @@ export function parseRecords(
           break;
         case DataFieldType.String:
           if (typeof value !== "object") {
-            record.values[field.name] = value?.toLocaleString(); //TODO: refine this
+            record.values[field.name] = value?.toLocaleString(); //TODO: fallback type, to be refined in type casting
           }
           break;
       }
@@ -158,14 +158,13 @@ function typeFromValues(values: Optional<DataValue>[]): DataFieldType {
   }
 }
 
+export const DateTimeRegex =
+  /^\d{4}-\d{2}-\d{2}(?:[Tt ](?:\d{2})?(?::\d{2})?(?::\d{2})?(?:.\d+)?(?:[+-]\d{2}(?::?\d{2})?|[Zz])?(?:\[[^\]]+\])?)?$/;
+
 export function detectCellType(value: unknown): DataFieldType {
   // Standard types
   if (typeof value === "string") {
-    if (
-      /^\d{4}-\d{2}-\d{2}(?:[Tt ](?:\d{2})?(?::\d{2})?(?::\d{2})?(?:.\d+)?(?:[+-]\d{2}(?::?\d{2})?|[Zz])?(?:\[[^\]]+\])?)?$/.test(
-        value
-      )
-    ) {
+    if (DateTimeRegex.test(value)) {
       return DataFieldType.Date;
     }
     return DataFieldType.String;
diff --git a/src/ui/app/filterFunctions.ts b/src/ui/app/filterFunctions.ts
index ee5288f4..012906e0 100644
--- a/src/ui/app/filterFunctions.ts
+++ b/src/ui/app/filterFunctions.ts
@@ -61,35 +61,31 @@ export function matchesCondition(
   } else if (isOptionalBoolean(value) && isBooleanFilterOperator(operator)) {
     return booleanFns[operator](value);
   } else if (isOptionalDate(value) && isDateFilterOperator(operator)) {
-    let parsedValue = null; // TODO: extract to help functions / processing numbers
-    if (cond.value) {
-      try {
-        // Attempt to parse as ZonedDateTime
-        parsedValue = Temporal.ZonedDateTime.from(cond.value);
-      } catch {
-        try {
-          // Attempt to parse as Instant and convert to ZonedDateTime
-          parsedValue = Temporal.Instant.from(cond.value).toZonedDateTimeISO(
-            cond.value
-          );
-        } catch {
-          try {
-            // Attempt to create ZonedDateTime using the current time and a PlainDate
-            parsedValue = Temporal.PlainDateTime.from(
-              cond.value
-            ).toZonedDateTime(Temporal.Now.timeZoneId());
-          } catch {
-            parsedValue = null; // Default to null if all parsing fails
-          }
-        }
-      }
-    }
-    return dateFns[operator](value, parsedValue ?? undefined);
+    const parsedDate = cond.value ? parseStringDate(cond.value) : undefined;
+    return dateFns[operator](value, parsedDate);
   }
 
   return false;
 }
 
+function parseStringDate(value: string) {
+  for (const parseFn of [
+    () => Temporal.ZonedDateTime.from(value), // with timezone id
+    () => Temporal.Instant.from(value).toZonedDateTimeISO(value), // with timezone offset
+    () =>
+      Temporal.PlainDateTime.from(value).toZonedDateTime(
+        Temporal.Now.timeZoneId()
+      ), // w/o timezone info
+  ]) {
+    try {
+      return parseFn();
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
 export function matchesFilterConditions(
   filter: FilterDefinition,
   record: DataRecord
@@ -156,8 +152,8 @@ export const booleanFns: Record<
   "is-not-checked": (value) => value === false,
 };
 
+// TODO: time filters, should be implemented together with day-level view
 export const dateFns: Record<
-  //TODO: handle datetime
   DateFilterOperator,
   (
     left: Optional<Temporal.ZonedDateTime>,
diff --git a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
index f69ae3c2..0c7ca726 100644
--- a/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
+++ b/src/ui/app/toolbar/viewOptions/color/ColorOptions.svelte
@@ -71,7 +71,7 @@
         getFilterOperatorType(detail as FilterOperator) !==
         getFilterOperatorType(filter.conditions[i]?.condition.operator)
       ) {
-        filter = setValue(filter, i, "");
+        filter = setValue(filter, i, ""); // TODO: better initialization for date / datetime inputs
       }
       filter = setOperator(filter, i, detail as FilterOperator);
       onFilterChange(filter);
@@ -167,14 +167,14 @@
             <DatetimeInput
               value={rule.condition.value
                 ? Temporal.PlainDateTime.from(rule.condition.value)
-                : Temporal.Now.plainDateTimeISO()}
+                : null}
               on:blur={handleValueChange(i)}
             />
           {:else}
             <DateInput
               value={rule.condition.value
                 ? Temporal.PlainDate.from(rule.condition.value)
-                : Temporal.Now.plainDateISO()}
+                : null}
               on:blur={handleValueChange(i)}
             />
           {/if}
diff --git a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte b/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
index be4f0bb6..f900a208 100644
--- a/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
+++ b/src/ui/app/toolbar/viewOptions/filter/FilterOptions.svelte
@@ -60,8 +60,7 @@
         getFilterOperatorType(detail as FilterOperator) !==
         getFilterOperatorType(filter.conditions[i]?.operator)
       ) {
-        //TODO: potential type conversion here.
-        filter = setValue(filter, i, "");
+        filter = setValue(filter, i, ""); // TODO: better initialization for date / datetime inputs
       }
       filter = setOperator(filter, i, detail as FilterOperator);
       onFilterChange(filter);