feat(insert time): Add configurable date/time format for Alt+T shortcut

apps/client/src/services/keyboard_actions.ts

@@ -115,6 +115,7 @@ function updateDisplayedShortcuts($container: JQuery<HTMLElement>) {
 export default {
     updateDisplayedShortcuts,
     setupActionsForElement,
+    getAction,
     getActions,
     getActionsForScope
 };

apps/client/src/services/utils.ts

@@ -124,22 +124,11 @@ function formatDateISO(date: Date) {
     return `${date.getFullYear()}-${padNum(date.getMonth() + 1)}-${padNum(date.getDate())}`;
 }
 
-
-export function formatDateTime(date: Date, userSuppliedFormat?: string): string {
-    const DEFAULT_FORMAT = 'YYYY-MM-DD HH:mm';
-    const formatToUse = (typeof userSuppliedFormat === 'string' && userSuppliedFormat.trim() !== "")
-        ? userSuppliedFormat.trim()
-        : DEFAULT_FORMAT;
-
-    if (!date) {
-        date = new Date();
-    }
-
-    try {
-        return dayjs(date).format(formatToUse);
-    } catch (e: any) {
-        console.warn(`TriliumNext: Day.js encountered an error with format string "${formatToUse}". Falling back to default. Error: ${e.message}`);
-        return dayjs(date).format(DEFAULT_FORMAT);
+function formatDateTime(date: Date, userSuppliedFormat?: string): string {
+    if (userSuppliedFormat?.trim()) {
+        return dayjs(date).format(userSuppliedFormat);
+    } else {
+        return `${formatDate(date)} ${formatTime(date)}`;
     }
 }
 

apps/client/src/translations/en/translation.json

@@ -1431,6 +1431,12 @@
     "label": "Automatic read-only size (text notes)",
     "unit": "characters"
   },
+  "custom_date_time_format": {
+    "title": "Custom Date/Time Format",
+    "description": "Customize the format of the date and time inserted using the <kbd> </kbd> shortcut. See <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js docs</a> for available format tokens.",
+    "format_string": "Format String:",
+    "formatted_time": "Formatted Time:"
+  },
   "i18n": {
     "title": "Localization",
     "language": "Language",
@@ -1962,16 +1968,5 @@
     "title": "Appearance",
     "word_wrapping": "Word wrapping",
     "color-scheme": "Color scheme"
-  },
-  "custom_date_time_format": {
-    "title": "Custom Date/Time Format (Alt+T)",
-    "desc1": "Define a custom format for the date and time inserted using the Alt+T shortcut.",
-    "desc2": "Uses <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js format tokens</a>. Refer to the Day.js documentation for valid tokens.",
-    "important_label": "Important:",
-    "desc3": "If you provide a format string that Day.js does not recognize (e.g., mostly plain text without valid Day.js tokens), the text you typed might be inserted literally. If the format string is left empty, or if Day.js encounters a critical internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.",
-    "format_string_label": "Format String:",
-    "placeholder": "e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D",
-    "examples_label": "Examples of valid Day.js formats:",
-    "example_default": "Default-like"
   }
 }

apps/client/src/widgets/type_widgets/content_widget.ts

@@ -8,6 +8,7 @@ import HeadingStyleOptions from "./options/text_notes/heading_style.js";
 import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
 import HighlightsListOptions from "./options/text_notes/highlights_list.js";
 import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
+import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 import CodeEditorOptions from "./options/code_notes/code_editor.js";
 import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
 import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
@@ -45,7 +46,6 @@ import LanguageOptions from "./options/i18n/language.js";
 import type BasicWidget from "../basic_widget.js";
 import CodeTheme from "./options/code_notes/code_theme.js";
 import RelatedSettings from "./options/related_settings.js";
-import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -84,13 +84,13 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (typeof NoteContextAw
         KeyboardShortcutsOptions
     ],
     _optionsTextNotes: [
-        DateTimeFormatOptions,
         EditorOptions,
         HeadingStyleOptions,
         CodeBlockOptions,
         TableOfContentsOptions,
         HighlightsListOptions,
-        TextAutoReadOnlySizeOptions
+        TextAutoReadOnlySizeOptions,
+        DateTimeFormatOptions
     ],
     _optionsCodeNotes: [
         CodeEditorOptions,

apps/client/src/widgets/type_widgets/editable_text.ts

@@ -377,22 +377,8 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
     async insertDateTimeToTextCommand() { 
         const date = new Date();
-        let userPreferredFormat = "";
-
-        try {
-
-            await options.initializedPromise;
-
-            const customFormatFromSettings = options.get("customDateTimeFormatString");
-
-            if (typeof customFormatFromSettings === 'string') { 
-                userPreferredFormat = customFormatFromSettings;
-            }
-        } catch (e: any) {
-            console.error("TriliumNext: Error during options initialization or getting custom date/time format. Using default.", e);
-        }
-
-        const dateString = utils.formatDateTime(date, userPreferredFormat);
+        const customDateTimeFormat = options.get("customDateTimeFormat");
+        const dateString = utils.formatDateTime(date, customDateTimeFormat);
 
         this.addTextToEditor(dateString);
     }

apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts

@@ -1,79 +1,79 @@
-import OptionsWidget from "../options_widget.js"; 
+import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons"; 
-
+import type { OptionMap } from "@triliumnext/commons";
+import utils from "../../../../services/utils.js";
+import keyboardActionsService from "../../../../services/keyboard_actions.js";
+import linkService from "../../../.././services/link.js";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <h4>${t("custom_date_time_format.title")}</h4>
+  <h4>${t("custom_date_time_format.title")}</h4>
 
-    <p>
-        ${t("custom_date_time_format.desc1")}
-        ${t("custom_date_time_format.desc2")}
-    </p>
-    <p>
-        <strong>${t("custom_date_time_format.important_label")}</strong>
-        ${t("custom_date_time_format.desc3")}
-    </p>
+  <p class="description">
+    ${t("custom_date_time_format.description")}
+  </p>
+
+  <table class="table table-borderless">
+    <tr>
+      <td>
+        ${t("custom_date_time_format.format_string")}
+      </td>
+      <td>
+        <input type="text" id="custom-date-time-format" class="form-control custom-date-time-format"
+          placeholder="YYYY-MM-DD HH:mm">
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        ${t("custom_date_time_format.formatted_time")}
+      </td>
+      <td>
+        <div class="formatted-date" style="padding-left: 0.5rem;">
+        </div>
+      </td>
+    </tr>
+  </table>
 
-    <div class="form-group">
-        <label for="customDateTimeFormatInput" style="margin-right: 10px;">
-            ${t("custom_date_time_format.format_string_label")}
-        </label>
-        <input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input" 
-               placeholder="${t("custom_date_time_format.placeholder")}" 
-               style="width: 300px; display: inline-block;">
-    </div>
-    <p style="margin-top: 5px;">
-        <em>${t("custom_date_time_format.examples_label")}</em>
-        <code>YYYY-MM-DD HH:mm</code> (${t("custom_date_time_format.example_default")}),
-        <code>DD.MM.YYYY</code>,
-        <code>MMMM D, YYYY h:mm A</code>,
-        <code>[Today is] dddd</code>
-    </p>
 </div>
 `;
 
 export default class DateTimeFormatOptions extends OptionsWidget {
-    
+
     private $formatInput!: JQuery<HTMLInputElement>;
+    private $formattedDate!: JQuery<HTMLInputElement>;
 
     doRender() {
-        this.$widget = $(TPL); 
-        this.$formatInput = this.$widget.find(
-            "input.custom-datetime-format-input"
-        ) as JQuery<HTMLInputElement>; 
+        this.$widget = $(TPL);
+
+        this.$formatInput = this.$widget.find("input.custom-date-time-format");
+        this.$formattedDate = this.$widget.find(".formatted-date");
 
         this.$formatInput.on("input", () => {
-            const formatString = this.$formatInput.val() as string; 
-            this.updateOption("customDateTimeFormatString", formatString);
+            const dateString = utils.formatDateTime(new Date(), this.$formatInput.val());
+            this.$formattedDate.text(dateString);
+        });
+
+        this.$formatInput.on('blur keydown', (e) => {
+            if (e.type === 'blur' || (e.type === 'keydown' && e.key === 'Enter')) {
+                this.updateOption("customDateTimeFormat", this.$formatInput.val());
+            }
         });
 
         return this.$widget;
     }
 
     async optionsLoaded(options: OptionMap) {
-        const currentFormat = options.customDateTimeFormatString || "";
+        const shortcutKey = (await keyboardActionsService.getAction("insertDateTimeToText")).effectiveShortcuts.join(", ");
+        const $link = await linkService.createLink("_hidden/_options/_optionsShortcuts", {
+            "title": shortcutKey,
+            "showTooltip": false
+        });
+        this.$widget.find(".description").find("kbd").replaceWith($link);
 
-        if (this.$formatInput) {
-            this.$formatInput.val(currentFormat);
-        } else {
-
-            console.warn(
-                "TriliumNext DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
-            );
-            const inputField = this.$widget?.find( 
-                "input.custom-datetime-format-input"
-            ) as JQuery<HTMLInputElement> | undefined; 
-
-            if (inputField?.length) { 
-                this.$formatInput = inputField;
-                this.$formatInput.val(currentFormat);
-            } else {
-                console.error(
-                    "TriliumNext DateTimeFormatOptions: Could not find format input field in optionsLoaded."
-                );
-            }
-        }
+        const customDateTimeFormat = options.customDateTimeFormat || "YYYY-MM-DD HH:mm";
+        this.$formatInput.val(customDateTimeFormat);
+        const dateString = utils.formatDateTime(new Date(), customDateTimeFormat);
+        this.$formattedDate.text(dateString);
     }
 }

apps/server/src/routes/api/options.ts

@@ -57,6 +57,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "headingStyle",
     "autoCollapseNoteTree",
     "autoReadonlySizeText",
+    "customDateTimeFormat",
     "autoReadonlySizeCode",
     "overrideThemeFonts",
     "dailyBackupEnabled",
@@ -90,7 +91,6 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "redirectBareDomain",
     "showLoginInShareTheme",
     "splitEditorOrientation",
-    "customDateTimeFormatString",
 
     // AI/LLM integration options
     "aiEnabled",

packages/commons/src/lib/options_interface.ts

@@ -47,7 +47,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     passwordDerivedKeySalt: string;
     encryptedDataKey: string;
     hoistedNoteId: string;
-    customDateTimeFormatString: string;
+    customDateTimeFormat: string;
 
     // Multi-Factor Authentication
     mfaEnabled: boolean;