Implemented `timestampTag`

HISTORY.md

@@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor
 
 - Implemented a color picker, and allow hooking in a custom color
   picker. new options are `colorPicker` and `onColorPicker`.
+- Implemented a timestamp tag displayed right from timestamps,
+  with corresponding option `timestampTag`.
 
 
 ## 2018-08-17, version 5.23.1

docs/api.md

@@ -330,8 +330,11 @@ Constructs a new JSONEditor.
   }
   ```
 
+- `{boolean} timestampTag`
 
-
+  If true (default), a tag with the date/time of a timestamp is displayed
+  right from timestamps. A value is considered a timestamp when it
+  has a value larger than Jan 1th 2000, `946684800000`.
 
 - `{string} language`
 

src/css/jsoneditor.css

@@ -214,6 +214,15 @@ div.jsoneditor-tree div.jsoneditor-color .picker_wrapper.popup.popup_bottom {
   left: -10px;
 }
 
+div.jsoneditor-tree div.jsoneditor-date {
+  background: #a1a1a1;
+  color: white;
+  font-family: arial, sans-serif;
+  border-radius: 3px;
+  display: inline-block;
+  padding: 3px;
+}
+
 div.jsoneditor {
   color: #1A1A1A;
   border: 1px solid #3883fa;

src/js/JSONEditor.js

@@ -160,6 +160,8 @@ JSONEditor.VALID_OPTIONS = [
   'onChange', 'onChangeJSON', 'onChangeText',
   'onEditable', 'onError', 'onEvent', 'onModeChange', 'onValidate',
   'onSelectionChange', 'onTextSelectionChange',
+  'colorPicker', 'onColorPicker',
+  'timestampTag',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
   'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
 ];

src/js/Node.js

@@ -12,6 +12,8 @@ var translate = require('./i18n').translate;
 
 var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
 
+var YEAR_2000 = 946684800000;
+
 /**
  * @constructor Node
  * Create a new Node
@@ -1764,6 +1766,29 @@ Node.prototype._updateDomValue = function () {
       this._deleteDomColor();
     }
 
+    // show date tag when value is a timestamp in milliseconds
+    if (this.editor.options.timestampTag &&
+        typeof value === 'number' &&
+        value > YEAR_2000 &&
+        !isNaN(new Date(value).valueOf())) {
+
+      if (!this.dom.date) {
+        this.dom.date = document.createElement('div');
+        this.dom.date.className = 'jsoneditor-date'
+        this.dom.value.parentNode.appendChild(this.dom.date);
+      }
+
+      this.dom.date.innerHTML = new Date(value).toISOString();
+      this.dom.date.title = new Date(value).toString();
+    }
+    else {
+      // cleanup date tag
+      if (this.dom.date) {
+        this.dom.date.parentNode.removeChild(this.dom.date);
+        delete this.dom.date;
+      }
+    }
+
     // strip formatting from the contents of the editable div
     util.stripFormatting(domValue);
   }

src/js/treemode.js

@@ -167,6 +167,7 @@ treemode._setOptions = function (options) {
             'Either use the full bundle or implement your own color picker using `onColorPicker`.')
       }
     },
+    timestampTag: true,
     onEvent: null
   };
 

test/test_build.html

@@ -73,6 +73,7 @@
     "number": 123,
     "object": {"a": "b", "c": "d"},
     "string": "Hello World",
+    "timestamp": 1534952749890,
     "url": "http://jsoneditoronline.org"
   };