Feature: add custom date format

.eslintrc.js

@@ -36,5 +36,11 @@ module.exports = {
     curly: ['error', 'all'],
     eqeqeq: 'error',
     'prefer-arrow-callback': 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 };

schema/settings.json

@@ -46,6 +46,12 @@
       "title": "History of Cell Execution Time",
       "description": "Show the historical N previous execution times since the notebook was opened as a tooltip (0 to disabled)",
       "default": 5
+    },
+    "dateFormat": {
+      "type": "string",
+      "title": "Date format",
+      "description": "Show the formatted date string in the given format. For example \"yyy-MM-dd HH:mm:ss\" results in \"2023-02-28 14:25:57 \", \"dd/MM/YYY HH:mm:ss (O)\" results in \"28/02/2023 14:25:57 (GMT +3)\".Find out more on unicode date field symbols on this link [https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table]",
+      "default": "yyy-MM-dd HH:mm:ss"
     }
   }
 }

src/ExecuteTimeWidget.ts

@@ -29,6 +29,7 @@ export interface IExecuteTimeSettings {
   textContrast: string;
   showLiveExecutionTime: boolean;
   historyCount: number;
+  dateFormat: string;
 }
 
 export default class ExecuteTimeWidget extends Widget {
@@ -271,7 +272,8 @@ export default class ExecuteTimeWidget extends Widget {
           executionTimeNode.children[2].textContent = '';
 
           msg = `Last executed at ${getTimeString(
-            endTime
+            endTime,
+            this._settings.dateFormat
           )} in ${executionTime}`;
         }
       } else if (startTime) {
@@ -300,7 +302,10 @@ export default class ExecuteTimeWidget extends Widget {
             }
           }, 100);
         }
-        msg = `Execution started at ${getTimeString(startTime)}`;
+        msg = `Execution started at ${getTimeString(
+          startTime,
+          this._settings.dateFormat
+        )}`;
       } else if (queuedTime) {
         const lastRunTime = executionTimeNode.getAttribute(
           'data-prev-execution-time'
@@ -309,7 +314,10 @@ export default class ExecuteTimeWidget extends Widget {
           executionTimeNode.children[2].textContent = `N/A (${lastRunTime})`;
         }
 
-        msg = `Execution queued at ${getTimeString(queuedTime)}`;
+        msg = `Execution queued at ${getTimeString(
+          queuedTime,
+          this._settings.dateFormat
+        )}`;
       }
       if (executionTimeNode.textContent !== msg) {
         executionTimeNode.children[0].textContent = msg;
@@ -346,6 +354,7 @@ export default class ExecuteTimeWidget extends Widget {
       .composite as boolean;
     this._settings.historyCount = settings.get('historyCount')
       .composite as number;
+    this._settings.dateFormat = settings.get('dateFormat').composite as string;
 
     const cells = this._panel.context.model.cells;
     if (this._settings.enabled) {
@@ -375,5 +384,6 @@ export default class ExecuteTimeWidget extends Widget {
     textContrast: 'high',
     showLiveExecutionTime: true,
     historyCount: 5,
+    dateFormat: 'yyy-MM-dd HH:mm:ss',
   };
 }

src/formatters.ts

@@ -1,7 +1,52 @@
 import { differenceInMilliseconds, format } from 'date-fns';
 
-export const getTimeString = (date: Date): string => {
-  return format(date, 'yyy-MM-dd HH:mm:ss');
+/**
+ * Checks if a given date format string is valid.
+ *
+ * This function checks if the input date format string contains only valid characters.
+ * Valid unicode date field characters include: y, G, u, q, Q, M, L, w, d, e, E, c, a, b, B, h, H, k, K, m, s, S, z, O, x, X.
+ * Valid unicade date field characters are based on [date-fns unicode format](https://date-fns.org/docs/format).
+ *
+ * @param {string} dateFormat - The date format string to validate.
+ * @returns {boolean} Returns true if the format is valid.
+ * @throws {Error} Throws an error if the format contains invalid characters.
+ */
+export const isValidDateFormat = (dateFormat: string) => {
+  const validCharsRegex = new RegExp(
+    '([^yGuqQMLwdeEcabBhHkKmsSzOxX\\W])',
+    'gm'
+  );
+
+  const invalidChars = dateFormat.match(validCharsRegex);
+
+  if (invalidChars !== null) {
+    const uniqueInvalidChars = [...new Set(invalidChars)];
+    throw new Error(
+      `Invalid characters in date format: ${uniqueInvalidChars.join(
+        ', '
+      )} . see https://date-fns.org/docs/format for valid characters`
+    );
+  }
+
+  return true; // The format is valid.
+};
+
+export const getTimeString = (
+  date: Date,
+  dateFormat = 'yyy-MM-dd HH:mm:ss'
+): string => {
+  try {
+    // Check if the dateFormat is valid before formatting
+    isValidDateFormat(dateFormat);
+
+    return format(date, dateFormat);
+  } catch (error) {
+    if (error instanceof RangeError) {
+      console.error(error.message);
+    } else {
+      throw error; // Re-throw other errors for further handling
+    }
+  }
 };
 
 export const getTimeDiff = (end: Date, start: Date): string => {