client: allow date & time to be passed as a string to the date & time formatter, refactor

src/public/app/utils/formatters.js

@@ -1,22 +1,32 @@
 /**
- * Formats the given date to a string based on the current locale.
+ * Formats the given date and time to a string based on the current locale.
- * @param {Date | number} date 
+ * @param {string | Date | number} date 
  * @param {"full" | "long" | "medium" | "short" | "none" | undefined} dateStyle 
  * @param {"full" | "long" | "medium" | "short" | "none" | undefined} tiemStyle 
  */
-export function formatDate(date, dateStyle = "medium", timeStyle = "medium") {
+export function formatDateTime(date, dateStyle = "medium", timeStyle = "medium") {
     const locale = navigator.language;
 
+    let parsedDate;
+    if (typeof date === "string") {
+        // Parse the given string as a date
+        parsedDate = new Date(date);
+    } else if (typeof date === "number" || date instanceof Date) {
+        parsedDate = date;
+    } else {
+        throw new TypeError();
+    };
+
     if (timeStyle === "none") {
         // Format only the date
-        return date.toLocaleDateString(locale, {dateStyle});
+        return parsedDate.toLocaleDateString(locale, {dateStyle});
     } else if (dateStyle === "none") {
         // Format only the time
-        return date.toLocaleTimeString(locale, {timeStyle});
+        return parsedDate.toLocaleTimeString(locale, {timeStyle});
     } else {
         // Format the date and time
         const formatter = new Intl.DateTimeFormat(navigator.language, {dateStyle, timeStyle});
-        return formatter.format(date);
+        return formatter.format(parsedDate);
     }
 }
 

src/public/app/widgets/dialogs/about.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../../utils/formatters.js"
+import { formatDateTime } from "../../utils/formatters.js"
 import { t } from "../../services/i18n.js";
 import BasicWidget from "../basic_widget.js";
 import openService from "../../services/open.js";
@@ -69,7 +69,7 @@ export default class AboutDialog extends BasicWidget {
         this.$appVersion.text(appInfo.appVersion);
         this.$dbVersion.text(appInfo.dbVersion);
         this.$syncVersion.text(appInfo.syncVersion);
-        this.$buildDate.text(formatDate(new Date(appInfo.buildDate)));
+        this.$buildDate.text(formatDateTime(appInfo.buildDate));
         this.$buildRevision.text(appInfo.buildRevision);
         this.$buildRevision.attr('href', `https://github.com/TriliumNext/Notes/commit/${appInfo.buildRevision}`);
         if (utils.isElectron()) {

src/public/app/widgets/dialogs/recent_changes.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../../utils/formatters.js"
+import { formatDateTime } from "../../utils/formatters.js"
 import { t } from "../../services/i18n.js";
 import appContext from "../../components/app_context.js";
 import BasicWidget from "../basic_widget.js";
@@ -72,11 +72,11 @@ export default class RecentChangesDialog extends BasicWidget {
         for (const [dateDay, dayChanges] of groupedByDate) {
             const $changesList = $('<ul>');
 
-            const formattedDate = formatDate(new Date(dateDay), "full", "none");
+            const formattedDate = formatDateTime(dateDay, "full", "none");
             const dayEl = $('<div>').append($('<b>').text(formattedDate)).append($changesList);
 
             for (const change of dayChanges) {
-                const formattedTime = formatDate(new Date(change.date), "none", "short");
+                const formattedTime = formatDateTime(change.date, "none", "short");
 
                 let $noteLink;
 

src/public/app/widgets/ribbon_widgets/note_info_widget.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../../utils/formatters.js"
+import { formatDateTime } from "../../utils/formatters.js"
 import { t } from "../../services/i18n.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import server from "../../services/server.js";
@@ -123,11 +123,11 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
 
         this.$noteId.text(note.noteId);
         this.$dateCreated
-            .text(formatDate(new Date(metadata.dateCreated)))
+            .text(formatDateTime(metadata.dateCreated))
             .attr("title", metadata.dateCreated);
 
         this.$dateModified
-            .text(formatDate(new Date(metadata.dateModified)))
+            .text(formatDateTime(metadata.dateModified))
             .attr("title", metadata.dateModified);
 
         this.$type.text(note.type);

src/public/app/widgets/type_widgets/options/backup.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../../../utils/formatters.js"
+import { formatDateTime } from "../../../utils/formatters.js"
 import { t } from "../../../services/i18n.js";
 import OptionsWidget from "./options_widget.js";
 import server from "../../../services/server.js";
@@ -119,7 +119,7 @@ export default class BackupOptions extends OptionsWidget {
             for (const {filePath, mtime} of backupFiles) {
                 this.$existingBackupList.append($(`
                     <tr>
-                        <td>${(mtime) ? formatDate(new Date(mtime)) : "-"}</td>
+                        <td>${(mtime) ? formatDateTime(mtime) : "-"}</td>
                         <td>${filePath}</td>
                     </tr>
                 `));

src/public/app/widgets/type_widgets/options/etapi.js

@@ -1,4 +1,4 @@
-import { formatDate } from "../../../utils/formatters.js"
+import { formatDateTime } from "../../../utils/formatters.js"
 import { t } from "../../../services/i18n.js";
 import dialogService from "../../../services/dialog.js";
 import OptionsWidget from "./options_widget.js";
@@ -96,7 +96,7 @@ export default class EtapiOptions extends OptionsWidget {
             $tokensTableBody.append(
                 $("<tr>")
                     .append($("<td>").text(token.name))
-                    .append($("<td>").text(formatDate(new Date(token.utcDateCreated))))
+                    .append($("<td>").text(formatDateTime(token.utcDateCreated)))
                     .append($("<td>").append(
                         $(`<span class="bx bx-pen token-table-button" title="${t("etapi.rename_token")}"></span>`)
                             .on("click", () => this.renameToken(token.etapiTokenId, token.name)),