use Date.getTime() instead Date.valueOf().

dist/components/types/Date-style.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var style = "\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    width: 200px;\n    padding: 4px;\n    margin-top: 1px;\n    z-index: 99999 !important;\n    background: #fff;\n    box-shadow: 0 1px 3px rgba(0,0,0,.1);\n    border: 1px solid #f9f9f9;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    box-shadow: none;\n    position: static;\n  }\n  \n  .rdtPicker .rdtTimeToggle {\n    text-align: center;\n    font-size:11px;\n  }\n  \n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 28px;\n  }\n  .rdtPicker td {\n    cursor: pointer;\n  }\n  .rdtPicker td.rdtDay:hover,\n  .rdtPicker td.rdtHour:hover,\n  .rdtPicker td.rdtMinute:hover,\n  .rdtPicker td.rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover {\n    background: #eeeeee;\n    cursor: pointer;\n  }\n  .rdtPicker td.rdtOld,\n  .rdtPicker td.rdtNew {\n    color: #999999;\n  }\n  .rdtPicker td.rdtToday {\n    position: relative;\n  }\n  .rdtPicker td.rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid #428bca;\n    border-top-color: rgba(0, 0, 0, 0.2);\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker td.rdtActive,\n  .rdtPicker td.rdtActive:hover {\n    background-color: #428bca;\n    color: #fff;\n    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n  }\n  .rdtPicker td.rdtActive.rdtToday:before {\n    border-bottom-color: #fff;\n  }\n  .rdtPicker td.rdtDisabled,\n  .rdtPicker td.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  \n  .rdtPicker td span.rdtOld {\n    color: #999999;\n  }\n  .rdtPicker td span.rdtDisabled,\n  .rdtPicker td span.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #f9f9f9;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    font-size: 11px;\n    border-bottom: none;\n  }\n  .rdtPicker th.rdtSwitch {\n    width: 100px;\n    font-size: 11px;\n  }\n  .rdtPicker th.rdtNext,\n  .rdtPicker th.rdtPrev {\n    font-size: 11px;\n    vertical-align: top;\n  }\n  \n  .rdtPrev span,\n  .rdtNext span {\n    display: block;\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none;   /* Chrome/Safari/Opera */\n    -khtml-user-select: none;    /* Konqueror */\n    -moz-user-select: none;      /* Firefox */\n    -ms-user-select: none;       /* Internet Explorer/Edge */\n    user-select: none;\n  }\n  \n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #eeeeee;\n  }\n  \n  .rdtPicker tfoot {\n    border-top: 1px solid #f9f9f9;\n  }\n  \n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #eee;\n  }\n  \n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  \n  td.rdtMonth,\n  td.rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  td.rdtMonth:hover,\n  td.rdtYear:hover {\n    background: #eee;\n  }\n  \n  td.rdtDay {\n    font-size: 11px\n  }\n  \n  .rdtCounters {\n    display: inline-block;\n  }\n  \n  .rdtCounters > div {\n    float: left;\n  }\n  \n  .rdtCounter {\n    height: 100px;\n  }\n  \n  .rdtCounter {\n    width: 40px;\n  }\n  \n  .rdtCounterSeparator {\n    line-height: 100px;\n  }\n  \n  .rdtCounter .rdtBtn {\n    height: 40%;\n    line-height: 40px;\n    cursor: pointer;\n    display: block;\n    font-size: 11px;\n  \n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none;   /* Chrome/Safari/Opera */\n    -khtml-user-select: none;    /* Konqueror */\n    -moz-user-select: none;      /* Firefox */\n    -ms-user-select: none;       /* Internet Explorer/Edge */\n    user-select: none;\n  }\n  .rdtCounter .rdtBtn:hover {\n    background: #eee;\n  }\n  .rdtCounter .rdtCount {\n    height: 20%;\n    font-size: 11px;\n  }\n  \n  .rdtMilli {\n    vertical-align: middle;\n    padding-left: 8px;\n    width: 48px;\n  }\n  \n  .rdtMilli input {\n    width: 100%;\n    font-size: 11px;\n    margin-top: 37px;\n  }\n";
+
+exports.default = style;

dist/components/types/Date.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDatetime = require('react-datetime');
+
+var _reactDatetime2 = _interopRequireDefault(_reactDatetime);
+
+var _insertCss = require('insert-css');
+
+var _insertCss2 = _interopRequireDefault(_insertCss);
+
+var _DateStyle = require('./Date-style');
+
+var _DateStyle2 = _interopRequireDefault(_DateStyle);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _insertCss2.default)(_DateStyle2.default);
+
+var DateType = function (_React$Component) {
+  (0, _inherits3.default)(DateType, _React$Component);
+
+  function DateType() {
+    (0, _classCallCheck3.default)(this, DateType);
+    return (0, _possibleConstructorReturn3.default)(this, (DateType.__proto__ || (0, _getPrototypeOf2.default)(DateType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(DateType, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+      return _react2.default.createElement(_reactDatetime2.default, {
+        id: knob.name,
+        value: new Date(knob.value),
+        type: 'date',
+        onChange: function onChange(date) {
+          return _onChange(date.valueOf());
+        }
+      });
+    }
+  }]);
+  return DateType;
+}(_react2.default.Component);
+
+DateType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+DateType.serialize = function (value) {
+  return String(value);
+};
+
+DateType.deserialize = function (value) {
+  return parseFloat(value);
+};
+
+exports.default = DateType;

dist/components/types/index.js

@@ -24,6 +24,10 @@ var _Select = require('./Select');
 
 var _Select2 = _interopRequireDefault(_Select);
 
+var _Date = require('./Date');
+
+var _Date2 = _interopRequireDefault(_Date);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
@@ -31,5 +35,6 @@ exports.default = {
   number: _Number2.default,
   boolean: _Boolean2.default,
   object: _Object2.default,
-  select: _Select2.default
+  select: _Select2.default,
+  date: _Date2.default
 };

dist/index.js

@@ -9,6 +9,7 @@ exports.boolean = boolean;
 exports.number = number;
 exports.object = object;
 exports.select = select;
+exports.date = date;
 exports.withKnobs = withKnobs;
 
 var _storybookAddons = require('@kadira/storybook-addons');
@@ -47,6 +48,11 @@ function select(name, options, value) {
   return manager.knob(name, { type: 'select', options: options, value: value });
 }
 
+function date(name, value) {
+  var timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
+  return new Date(timestamp);
+}
+
 function withKnobs(storyFn, context) {
   var channel = _storybookAddons2.default.getChannel();
   return manager.wrapStory(channel, storyFn, context);

src/index.js

@@ -28,8 +28,8 @@ export function select(name, options, value) {
 }
 
 export function date(name, value) {
-  const r = manager.knob(name, { type: 'date', value: value.valueOf() });
-  return new Date(r);
+  const timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
+  return new Date(timestamp);
 }
 
 export function withKnobs(storyFn, context) {