From b6e519dfaa5e4ab39830454d5ea4ee160be33035 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 19 May 2026 16:39:19 +0800
Subject: [PATCH] feat(grid): use temporal inputs for date cells

---
 apps/desktop/src/components/grid/DataGrid.vue | 48 ++++++++++++++-
 .../desktop/src/lib/dataGridTemporalEditor.ts | 60 +++++++++++++++++++
 .../app-tests/dataGridTemporalEditor.test.ts  | 33 ++++++++++
 3 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/lib/dataGridTemporalEditor.ts
 create mode 100644 packages/app-tests/dataGridTemporalEditor.test.ts

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 33b7ba0618..b134b6240e 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -104,6 +104,12 @@ import {
   type ColumnFormatterConfig,
   type DateTimeFormatterUnit,
 } from "@/lib/columnFormatter";
+import {
+  formatTemporalInputValue,
+  parseTemporalInputValue,
+  temporalCellEditorKind,
+  type TemporalCellEditorKind,
+} from "@/lib/dataGridTemporalEditor";
 import { isCancelSearchShortcut, isFocusSearchShortcut } from "@/lib/keyboardShortcuts";
 import { dataGridHeaderContentWidth, scrollbarGutterWidth } from "@/lib/dataGridScrollGutter";
 import { dataGridSaveActionMode, dataGridSaveToolbarState } from "@/lib/dataGridSaveUi";
@@ -1386,6 +1392,43 @@ function canEditCellItem(item: RowItem | undefined, columnIndex: number): boolea
   return true;
 }
 
+function tableColumnForGridColumn(columnIndex: number): ColumnInfo | undefined {
+  const columnName = props.sourceColumns?.[columnIndex] ?? props.result.columns[columnIndex];
+  if (!columnName) return undefined;
+  return props.tableMeta?.columns.find((column) => column.name.toLowerCase() === columnName.toLowerCase());
+}
+
+function temporalEditorKindForColumn(columnIndex: number): TemporalCellEditorKind | undefined {
+  return temporalCellEditorKind(tableColumnForGridColumn(columnIndex)?.data_type, props.databaseType);
+}
+
+function cellEditInputType(columnIndex: number): string {
+  const kind = temporalEditorKindForColumn(columnIndex);
+  if (kind === "date") return "date";
+  if (kind === "time") return "time";
+  if (kind === "datetime") return "datetime-local";
+  return "text";
+}
+
+function cellEditInputStep(columnIndex: number): string | undefined {
+  return temporalEditorKindForColumn(columnIndex) ? "1" : undefined;
+}
+
+function cellEditInputValue(columnIndex: number): string {
+  const kind = temporalEditorKindForColumn(columnIndex);
+  return kind ? formatTemporalInputValue(editValue.value, kind) : editValue.value;
+}
+
+function onCellEditInput(columnIndex: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  const kind = temporalEditorKindForColumn(columnIndex);
+  if (!kind) {
+    editValue.value = target.value;
+    return;
+  }
+  editValue.value = parseTemporalInputValue(target.value, kind) ?? "NULL";
+}
+
 function canDeleteRowItem(item: RowItem | undefined): boolean {
   return !!props.editable && !!item && !item.isDeleted && (item.isNew || canEditExistingRows.value);
 }
@@ -3500,11 +3543,14 @@ defineExpose({
                       >
                         <template v-if="editingCell?.rowId === item.id && editingCell?.col === actualColIdx">
                           <input
-                            v-model="editValue"
+                            :type="cellEditInputType(actualColIdx)"
+                            :step="cellEditInputStep(actualColIdx)"
+                            :value="cellEditInputValue(actualColIdx)"
                             autocapitalize="off"
                             autocorrect="off"
                             spellcheck="false"
                             class="cell-edit-input absolute inset-0 bg-background border-2 border-primary px-2 py-0.5 text-xs outline-none z-10"
+                            @input="onCellEditInput(actualColIdx, $event)"
                             @blur="commitEdit"
                             @click.stop
                             @keydown.stop="onEditKeydown"
diff --git a/apps/desktop/src/lib/dataGridTemporalEditor.ts b/apps/desktop/src/lib/dataGridTemporalEditor.ts
new file mode 100644
index 0000000000..9c1e7206d2
--- /dev/null
+++ b/apps/desktop/src/lib/dataGridTemporalEditor.ts
@@ -0,0 +1,60 @@
+import type { DatabaseType } from "@/types/database";
+
+export type TemporalCellEditorKind = "date" | "time" | "datetime";
+
+export function temporalCellEditorKind(
+  dataType: string | undefined,
+  _databaseType?: DatabaseType,
+): TemporalCellEditorKind | undefined {
+  const normalized = normalizeTemporalType(dataType);
+  if (!normalized) return undefined;
+  if (/\b(?:datetime|datetime2|datetime64|smalldatetime|datetimeoffset|timestamp|timestamptz)\b/.test(normalized)) {
+    return "datetime";
+  }
+  if (/\bdate(?:32)?\b/.test(normalized)) return "date";
+  if (/\b(?:time|timetz|time64)\b/.test(normalized)) return "time";
+  return undefined;
+}
+
+export function formatTemporalInputValue(
+  value: string | number | boolean | null,
+  kind: TemporalCellEditorKind,
+): string {
+  if (value === null || value === undefined) return "";
+  const text = String(value).trim();
+  if (!text) return "";
+
+  if (kind === "date") {
+    const date = text.match(/^(\d{4}-\d{2}-\d{2})/);
+    return date?.[1] ?? "";
+  }
+
+  if (kind === "time") {
+    return normalizeTimeInput(text);
+  }
+
+  const datetime = text.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2})(?::(\d{2}))?/);
+  if (!datetime) return "";
+  return `${datetime[1]}T${datetime[2]}:${datetime[3] ?? "00"}`;
+}
+
+export function parseTemporalInputValue(value: string, kind: TemporalCellEditorKind): string | null {
+  const text = value.trim();
+  if (!text) return null;
+  if (kind === "date") return text;
+  if (kind === "time") return normalizeTimeInput(text) || null;
+
+  const [date, time = ""] = text.split("T");
+  const normalizedTime = normalizeTimeInput(time);
+  return date && normalizedTime ? `${date} ${normalizedTime}` : text.replace("T", " ");
+}
+
+function normalizeTemporalType(dataType: string | undefined): string {
+  return (dataType ?? "").toLowerCase().replace(/_/g, "").replace(/[(),]/g, " ").replace(/\s+/g, " ").trim();
+}
+
+function normalizeTimeInput(text: string): string {
+  const match = text.match(/^(\d{2}:\d{2})(?::(\d{2}))?/);
+  if (!match) return "";
+  return `${match[1]}:${match[2] ?? "00"}`;
+}
diff --git a/packages/app-tests/dataGridTemporalEditor.test.ts b/packages/app-tests/dataGridTemporalEditor.test.ts
new file mode 100644
index 0000000000..6bc2de2561
--- /dev/null
+++ b/packages/app-tests/dataGridTemporalEditor.test.ts
@@ -0,0 +1,33 @@
+import { strict as assert } from "node:assert";
+import test from "node:test";
+import {
+  formatTemporalInputValue,
+  parseTemporalInputValue,
+  temporalCellEditorKind,
+} from "../../apps/desktop/src/lib/dataGridTemporalEditor.ts";
+
+test("detects explicit date time column types for grid editing", () => {
+  assert.equal(temporalCellEditorKind("date"), "date");
+  assert.equal(temporalCellEditorKind("Date32"), "date");
+  assert.equal(temporalCellEditorKind("time without time zone"), "time");
+  assert.equal(temporalCellEditorKind("timestamp with time zone"), "datetime");
+  assert.equal(temporalCellEditorKind("datetime2(3)"), "datetime");
+  assert.equal(temporalCellEditorKind("Nullable(DateTime64(3))"), "datetime");
+  assert.equal(temporalCellEditorKind("varchar"), undefined);
+  assert.equal(temporalCellEditorKind("updated_at"), undefined);
+});
+
+test("formats existing temporal cell values for native inputs", () => {
+  assert.equal(formatTemporalInputValue("2026-05-19 08:30:45", "date"), "2026-05-19");
+  assert.equal(formatTemporalInputValue("2026-05-19 08:30:45", "datetime"), "2026-05-19T08:30:45");
+  assert.equal(formatTemporalInputValue("08:30:45.123456", "time"), "08:30:45");
+  assert.equal(formatTemporalInputValue(null, "datetime"), "");
+});
+
+test("parses native temporal input values back to grid save strings", () => {
+  assert.equal(parseTemporalInputValue("2026-05-19", "date"), "2026-05-19");
+  assert.equal(parseTemporalInputValue("2026-05-19T08:30", "datetime"), "2026-05-19 08:30:00");
+  assert.equal(parseTemporalInputValue("2026-05-19T08:30:45", "datetime"), "2026-05-19 08:30:45");
+  assert.equal(parseTemporalInputValue("08:30", "time"), "08:30:00");
+  assert.equal(parseTemporalInputValue("", "time"), null);
+});