Add support for custom date format

README.md

@@ -8,15 +8,17 @@ To install the package, use the command `npm install json-display`.
 
 The function can either be imported with CommonJS, AMD or will be added to the window as `JSONDisplay`.
 
-`JSONDisplay(json, openLevels, styleOptions)`
+`JSONDisplay(json, openLevels, styleOptions, formatters)`
 
 **Arguments**
 
 `json`: A Javascript object, which will be transformed into the JSON-compliant HTML structure. If you have a JSON string, first parse it with `JSON.parse`, i.e. `JSONDisplay(JSON.parse(jsonString))`
 
 `openLevels`: *(optional)* This is the amount of levels of the JSON structure that will be automatically opened when first rendering the object. 0 or less will cause the entire structure to begin closed. Null, anything not parsable as an integer, or simply not providing an argument will cause every level to begin open.
 
-`styleOptions`: *(optional)* This is an object that provides overrides for the tags and styles used for the HTML structure, it will be deep merged into the default options so you do not have to provide all the options. See the source code to understand the structure you are adding the styles and tags into. 
+`styleOptions`: *(optional)* This is an object that provides overrides for the tags and styles used for the HTML structure, it will be deep merged into the default options so you do not have to provide all the options. See the source code to understand the structure you are adding the styles and tags into.
+
+`formatters`: *(optional)* This parameter provides an override for formatting date objects. 
 
 The default options are:
 
@@ -42,9 +44,17 @@ The default options are:
 }
 ```
 
+The default formatters are:
+
+```
+{
+    date: function(date) { return date.toISOString(); },
+}
+```
+
 **Return value**
 
-The return value is a HTMLElement structure
+The return value is an HTMLElement structure
 
 ## Contributing
 

json-display.js

@@ -27,7 +27,7 @@
     root.JSONDisplay = factory();
   }
 }(this, function() {
-  return function JSONDisplay(json, openLevelsArg, styleOptionsArg) {
+  return function JSONDisplay(json, openLevelsArg, styleOptionsArg, formattersArg) {
     var DEFAULT_STYLE_OPTIONS = {
       root: { tag: 'pre', style: 'padding: 5px; font-size: 1rem;' },
       titleContainer: { tag: 'div', style: 'margin-bottom: 3px;' },
@@ -47,10 +47,16 @@
       booleanValue: { tag: 'span', style: 'color: blue;' },
       nullValue: { tag: 'span', style: 'color: blue;' },
     };
+    var DEFAULT_FORMATTERS = {
+        date: function(date) { return date.toISOString(); },
+    };
     var openLevels = isNaN(parseInt(openLevelsArg)) ? Infinity : parseInt(openLevelsArg);
     var styleOptions = typeof styleOptionsArg === 'object' 
                        ? mergeStyleOptions(DEFAULT_STYLE_OPTIONS, styleOptionsArg)
                        : DEFAULT_STYLE_OPTIONS;
+    var formatters = typeof formattersArg === 'object'
+                     ? mergeFormatterOptions(DEFAULT_FORMATTERS, formattersArg)
+                     : DEFAULT_FORMATTERS;
 
     if (typeof Object.assign != 'function') {
       Object.assign = function(target) {
@@ -83,7 +89,7 @@
         var voidElement = getValue(null);
         element.appendChild(voidElement);
       } else if (json instanceof Date) {
-        var dateElement = getValue(json.toISOString());
+        var dateElement = getValue(formatters.date(json));
         element.appendChild(dateElement);
       } else if (typeof json !== 'object') {
         var nonExpandableElement = getValue(json);
@@ -109,7 +115,7 @@
         } else if (json[key] === null || json[key] === undefined) {
           container.appendChild(getStandardPair(key, null));
         } else if (json[key] instanceof Date) {
-          container.appendChild(getStandardPair(key, json[key].toISOString()));
+          container.appendChild(getStandardPair(key, formatters.date(json[key])));
         } else if (typeof json[key] === 'object') {
           container.appendChild(getTitle('Object', key, nextLevelIsClosed));
           container.appendChild(convertJsonToElements(json[key], index + 1));
@@ -226,6 +232,14 @@
       return merged;
     }
 
+    function mergeFormatterOptions(defaults, overrides) {
+      var merged = {};
+      for (var key in defaults) {
+        merged[key] = overrides[key] || defaults[key];
+      }
+      return merged;
+    }
+
     return render();
   }
 }));

test/type-handling.spec.js

@@ -50,7 +50,7 @@ describe('Type handling', function() {
   });
 
   it('correctly displays dates', function () {
-    var result = JSONDisplay(new Date(2017, 0, 1, 12));
+    var result = JSONDisplay(new Date(Date.UTC(2017, 0, 1, 12)));
 
     expect(result.firstChild.innerHTML).to.equal('"2017-01-01T12:00:00.000Z"');
   });
@@ -142,7 +142,7 @@ describe('Type handling', function() {
 
     it('correctly displays dates', function () {
       var result = JSONDisplay({
-        date: new Date(2017, 0, 1, 12),
+        date: new Date(Date.UTC(2017, 0, 1, 12)),
       });
 
       expect(result.childNodes[1].firstChild.firstChild.innerHTML).to.equal('date: ');
@@ -262,7 +262,7 @@ describe('Type handling', function() {
 
     it('correctly displays dates', function () {
       var result = JSONDisplay([
-        new Date(2017, 0, 1, 12),
+        new Date(Date.UTC(2017, 0, 1, 12)),
       ]);
 
       expect(result.childNodes[1].firstChild.firstChild.innerHTML).to.equal('0: ');