update dates knob and add example

dist/index.js

@@ -49,7 +49,7 @@ function select(name, options, value) {
 }
 
 function date(name) {
-  var value = arguments.length <= 1 || arguments[1] === undefined ? new Date(0) : arguments[1];
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date(0);
 
   var timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
   return new Date(timestamp);

example/stories/index.js

@@ -11,38 +11,75 @@ import {
   date
 } from '../../src';
 
-storiesOf('Example of Knobs', module)
+const stories = storiesOf('Example of Knobs', module);
-  .addDecorator(withKnobs)
-  .add('simple example', () => (
-    <button>{text('Label', 'Hello Button')}</button>
-  ))
-  .add('with all knobs', () => {
-    const name = text('Name', 'Tom Cary');
-    const dob = date('DOB', new Date('January 20 1887'));
-    const bold = boolean('Bold', false);
-    const color = select('Color', {
-      red: 'Red',
-      green: 'Green',
-      black: 'Black'
-    }, 'black');
 
-    const customStyle = object('Style', {
+stories.addDecorator(withKnobs);
-      fontFamily: 'Arial',
-      padding: 20,
-    });
 
-    const style = {
+stories.add('simple example', () => (
-      ...customStyle,
+  <button>{text('Label', 'Hello Button')}</button>
-      fontWeight: bold ? 800: 400,
+));
-      color
-    };
 
-    return (
+stories.add('with all knobs', () => {
-      <div style={style}>
+  const name = text('Name', 'Tom Cary');
-        I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
+  const dob = date('DOB', new Date('January 20 1887'));
-      </div>
+  
-    );
+  const bold = boolean('Bold', false);
-  })
+  const color = select('Color', {
-  .add('without any knob', () => (
+    red: 'Red',
-    <button>This is a button</button>
+    green: 'Green',
-  ));
+    black: 'Black'
+  }, 'black');
+
+  const customStyle = object('Style', {
+    fontFamily: 'Arial',
+    padding: 20,
+  });
+
+  const style = {
+    ...customStyle,
+    fontWeight: bold ? 800: 400,
+    color
+  };
+
+  return (
+    <div style={style}>
+      I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
+    </div>
+  );
+})
+
+stories.add('dates Knob', () => {
+  const today = date('today');
+  const dob = date('DOB', null);
+  const myDob = date('My DOB', new Date('July 07 1993'));
+
+  return (
+    <ul style={{listStyleType:"none",listStyle:"none",paddingLeft:"15px"}}>
+      <li>
+        <p><b>Javascript Date</b> default value, passes date value</p>
+        <blockquote>
+          <code>const myDob = date('My DOB', new Date('July 07 1993'));</code>
+          <pre>// I was born in: "{moment(myDob).format("DD MMM YYYY")}"</pre>
+        </blockquote>
+      </li>
+      <li>
+        <p><b>undefined</b> default value passes today's date</p>
+        <blockquote>
+          <code>const today = date('today');</code>
+          <pre>// Today's date is: "{moment(today).format("DD MMM YYYY")}"</pre>
+        </blockquote>
+      </li>
+      <li>
+        <p><b>null</b> default value passes null value</p>
+        <blockquote>
+          <code>const dob = date('DOB', null);</code>
+          <pre>// You were born in: "{dob? moment(dob).format("DD MMM YYYY"): 'Please select date.'}"</pre>
+        </blockquote>
+      </li>
+    </ul>
+  )
+})
+
+stories.add('without any knob', () => (
+  <button>This is a button</button>
+));

src/components/types/Date/index.js

@@ -21,13 +21,16 @@ insertCss(customStyle);
 class DateType extends React.Component {
   render() {
     const { knob, onChange } = this.props;
+    console.log('knob.value', knob.value)
     return (
-      <Datetime
+      <div>
-        id={knob.name}
+        <Datetime
-        value={new Date(knob.value)}
+          id={knob.name}
-        type="date"
+          value={knob.value?new Date(knob.value) : null}
-        onChange={(date) => onChange(date.valueOf())}
+          type="date"
-      />
+          onChange={(date) => onChange(date.valueOf())}
+        />
+      </div>
     );
   }
 }

src/index.js

@@ -27,9 +27,14 @@ export function select(name, options, value) {
   return manager.knob(name, { type: 'select', options, value });
 }
 
-export function date(name, value = new Date(0)) {
+export function date(name, value = new Date()) {
-  const timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
+  // console.log('value::', value)
-  return new Date(timestamp);
+  const proxyValue = value? value.getTime() : null;
+  console.log('proxyValue',proxyValue)
+  // const proxyValue = value.getTime();
+  const timestamp = manager.knob(name, { type: 'date', value: proxyValue });
+  console.log('timestamp', timestamp)
+  return timestamp;
 }
 
 export function withKnobs(storyFn, context) {