add timestampFormat (#863)

* add timestampFormat

* use createTextNode instead innerHTML

docs/api.md

@@ -508,6 +508,36 @@ Constructs a new JSONEditor.
   
   Only applicable for modes `tree`, `form`, and `view`.
 
+- `{ function({field, value, path}) -> string|null } timestampFormat`
+
+  Customizing the way formating the timestamp. Called when a value is timestamp after `timestampTag`. If it returns null, the timestamp would be formatted with default setting (`new Date(value).toISOString()`).
+  
+  parameter:
+  
+  ```
+  {
+    field: string,
+    value: string,
+    path: string[]
+  }
+  ```
+
+  Example:
+  
+  ```js
+  var options = {
+    timestampFormat: function ({ field, value, path }) {
+      if (field === 'customTime') {
+        return new Date(value*1000).toString()
+      }
+
+      return null
+    }
+  }
+  ```
+  
+  Only applicable for modes `tree`, `form`, and `view`.
+
 - `{string} language`
 
   The default language comes from the browser navigator, but you can force a specific language. So use here string as 'en' or 'pt-BR'. Built-in languages: `en`, `pt-BR`, `zh-CN`, `tr`, `ja`, `fr-FR`. Other translations can be specified via the option `languages`.

examples/01_basic_usage.html

@@ -35,6 +35,7 @@
       'null': null,
       'number': 123,
       'object': {'a': 'b', 'c': 'd'},
+      'time': 1575599819000,
       'string': 'Hello World'
     }
     editor.set(json)

src/js/JSONEditor.js

@@ -180,7 +180,7 @@ JSONEditor.VALID_OPTIONS = [
   'onSelectionChange', 'onTextSelectionChange', 'onClassName',
   'onFocus', 'onBlur',
   'colorPicker', 'onColorPicker',
-  'timestampTag',
+  'timestampTag', 'timestampFormat',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
   'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
   'maxVisibleChilds', 'onValidationError'

src/js/Node.js

@@ -1791,8 +1791,22 @@ export class Node {
           this.dom.value.parentNode.appendChild(this.dom.date)
         }
 
-        this.dom.date.innerHTML = new Date(value).toISOString()
-        this.dom.date.title = new Date(value).toString()
+        let title = null
+        if (typeof this.editor.options.timestampFormat === 'function') {
+          title = this.editor.options.timestampFormat({
+            field: this.field,
+            value: this.value,
+            path: this.getPath()
+          })
+        }
+        if (!title) {
+          this.dom.date.innerHTML = new Date(value).toISOString()
+        } else {
+          while (this.dom.date.firstChild) {
+            this.dom.date.removeChild(this.dom.date.firstChild)
+          }
+          this.dom.date.appendChild(document.createTextNode(title))
+        }
       } else {
         // cleanup date tag
         if (this.dom.date) {

src/js/treemode.js

@@ -156,6 +156,7 @@ treemode._setOptions = function (options) {
       }
     },
     timestampTag: true,
+    timestampFormat: null,
     onEvent: null,
     enableSort: true,
     enableTransform: true