Fix #388 : Displaying date appropriately

agent/dehydrate.js

@@ -40,6 +40,12 @@ function dehydrate(data: Object, cleaned: Array<Array<string>>, path?: Array<str
       type: 'function',
     };
   }
+  if (data != null && typeof data === 'object' && Object.prototype.toString.call(data) === '[object Date]') {
+    return {
+      type: 'date',
+      name: data.toJSON(),
+    };
+  }
   if (!data || typeof data !== 'object') {
     if (typeof data === 'string' && data.length > 500) {
       return data.slice(0, 500) + '...';

frontend/DataView/previewComplex.js

@@ -47,6 +47,12 @@ function previewComplex(data: Object) {
         {data[consts.name]}
       </span>
     );
+  } else if (type === 'date') {
+    return (
+      <span style={valueStyles.date}>
+        {data[consts.name]}
+      </span>
+    );
   }
   return null;
 }

frontend/PropVal.js

@@ -83,6 +83,9 @@ function previewProp(val: any, nested: boolean) {
       // the name is "Symbol(something)"
       return <span style={valueStyles.symbol}>{val[consts.name]}</span>;
     }
+    if (type === 'date') {
+      return <span style={valueStyles.date}>{val[consts.name]}</span>;
+    }
   }
   if (nested) {
     return <span>{'{…}'}</span>;

frontend/value-styles.js

@@ -47,4 +47,8 @@ module.exports = {
   empty: {
     color: '#777',
   },
+
+  date: {
+    color: '#333',
+  },
 };

test/example/target.js

@@ -39,6 +39,7 @@ class Todos extends React.Component {
         */
       ],
       filter: 'All',
+      time: new Date(),
     };
   }
 
@@ -51,6 +52,7 @@ class Todos extends React.Component {
         title: text,
         completed: false,
         id: this._nextid++,
+        time: new Date(),
       }]),
     });
   }