From 82fa3ed2a595f783df39e6021df38b66b8628a1b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Nov 2016 19:13:37 +0800
Subject: [PATCH] update DatePicker doc and demo

---
 components/date-picker/demo/basic.md         |  5 +--
 components/date-picker/demo/disabled-date.md | 46 ++++++--------------
 components/date-picker/demo/disabled.md      | 11 ++---
 components/date-picker/demo/format.md        | 13 +++---
 components/date-picker/demo/locale.md        |  5 +--
 components/date-picker/demo/size.md          |  9 ++--
 components/date-picker/demo/time.md          | 20 +++++----
 components/date-picker/index.en-US.md        | 11 +++--
 components/date-picker/index.zh-CN.md        | 11 +++--
 9 files changed, 62 insertions(+), 69 deletions(-)

diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index 39db1ce6f7..ba3912f110 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -26,7 +26,6 @@ ReactDOM.render(
     <DatePicker onChange={onChange} /><br />
     <MonthPicker onChange={onChange} /><br />
     <RangePicker onChange={onChange} />
-  </div>,
-  mountNode
-);
+  </div>
+, mountNode);
 ````
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index 8862c0c8c0..9a8c32bba2 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -25,7 +25,6 @@ function range(start, end) {
   return result;
 }
 
-
 function disabledDate(current) {
   // can not select days before today and today
   return current && current.valueOf() < Date.now();
@@ -33,51 +32,32 @@ function disabledDate(current) {
 
 function disabledDateTime() {
   return {
-    disabledHours() {
-      return range(0, 60).splice(4, 20);
-    },
-    disabledMinutes() {
-      return range(30, 60);
-    },
-    disabledSeconds() {
-      return [55, 56];
-    },
+    disabledHours: () => range(0, 60).splice(4, 20),
+    disabledMinutes: () => range(30, 60),
+    disabledSeconds: () => [55, 56],
   };
 }
 
 function disabledRangeTime(_, type) {
   if (type === 'start') {
     return {
-      disabledHours() {
-        return range(0, 60).splice(4, 20);
-      },
-      disabledMinutes() {
-        return range(30, 60);
-      },
-      disabledSeconds() {
-        return [55, 56];
-      },
+      disabledHours: () => range(0, 60).splice(4, 20),
+      disabledMinutes: () => range(30, 60),
+      disabledSeconds: () => [55, 56],
     };
   }
   return {
-    disabledHours() {
-      return range(0, 60).splice(20, 4);
-    },
-    disabledMinutes() {
-      return range(0, 31);
-    },
-    disabledSeconds() {
-      return [55, 56];
-    },
+    disabledHours: () => range(0, 60).splice(20, 4),
+    disabledMinutes: () => range(0, 31),
+    disabledSeconds: () => [55, 56],
   };
 }
 
 ReactDOM.render(
   <div>
-    <DatePicker disabledDate={disabledDate} disabledTime={disabledDateTime} showTime />
+    <DatePicker format="YYYY-MM-DD HH:mm:ss" disabledDate={disabledDate} disabledTime={disabledDateTime} showTime />
     <br />
-    <RangePicker disabledDate={disabledDate} disabledTime={disabledRangeTime} showTime />
-  </div>,
-  mountNode
-);
+    <RangePicker format="YYYY-MM-DD HH:mm:ss" disabledDate={disabledDate} disabledTime={disabledRangeTime} showTime />
+  </div>
+, mountNode);
 ````
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index b45430c9a7..7fbe5347cf 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -21,13 +21,14 @@ const { MonthPicker, RangePicker } = DatePicker;
 const dateFormat = 'YYYY-MM-DD';
 ReactDOM.render(
   <div>
-    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled /><br />
-    <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled /><br />
+    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
+    <br />
+    <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
+    <br />
     <RangePicker
       defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
       disabled
     />
-  </div>,
-  mountNode
-);
+  </div>
+, mountNode);
 ````
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index c774919530..60cb0a5847 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -22,13 +22,14 @@ const dateFormat = 'YYYY/MM/DD';
 const monthFormat = 'YYYY/MM';
 ReactDOM.render(
   <div>
-    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /><br />
-    <MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} /><br />
+    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
+    <br />
+    <MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} />
+    <br />
     <RangePicker
       defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
       format={dateFormat}
-    /><br />
-  </div>,
-  mountNode
-);
+    />
+  </div>
+, mountNode);
 ````
diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md
index 846883df88..a3357eedb6 100644
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@@ -39,7 +39,6 @@ ReactDOM.render(
     locale={enUS}
     showTime
     onChange={log}
-  />,
-  mountNode
-);
+  />
+, mountNode);
 ````
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index f8fd8fc007..cefbfb4070 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -35,9 +35,12 @@ class PickerSizesDemo extends React.Component {
           <Radio.Button value="large">Large</Radio.Button>
           <Radio.Button value="default">Default</Radio.Button>
           <Radio.Button value="small">Small</Radio.Button>
-        </Radio.Group><br /><br />
-        <DatePicker size={size} /><br />
-        <MonthPicker size={size} /><br />
+        </Radio.Group>
+        <br /><br />
+        <DatePicker size={size} />
+        <br />
+        <MonthPicker size={size} />
+        <br />
         <RangePicker size={size} />
       </div>
     );
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index 36e0501b29..475f6f40eb 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -25,14 +25,18 @@ function onChange(value, dateString) {
 ReactDOM.render(
   <div>
     <DatePicker
-      showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm"
-      placeholder="Select Time" onChange={onChange}
-    /><br />
+      showTime
+      format="YYYY-MM-DD HH:mm:ss"
+      placeholder="Select Time"
+      onChange={onChange}
+    />
+    <br />
     <RangePicker
-      showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm"
-      placeholder={['Start Time', 'End Time']} onChange={onChange}
+      showTime
+      format="YYYY-MM-DD HH:mm:ss"
+      placeholder={['Start Time', 'End Time']}
+      onChange={onChange}
     />
-  </div>,
-  mountNode
-);
+  </div>
+, mountNode);
 ````
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index ed142f814b..4f7ec23be0 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -4,10 +4,7 @@ type: Data Entry
 title: DatePicker
 ---
 
-To select or input a date. There are three kinds of picker:
-* DatePicker
-* MonthPicker
-* RangePicker
+To select or input a date.
 
 ## When To Use
 
@@ -15,6 +12,12 @@ By clicking the input box, you can select a date from a popup calendar.
 
 ## API
 
+There are three kinds of picker:
+
+* DatePicker
+* MonthPicker
+* RangePicker
+
 **Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly.
 
 ```jsx
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 52332f395e..a4390750d2 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -5,10 +5,7 @@ title: DatePicker
 subtitle: 日期选择框
 ---
 
-输入或选择日期的控件，包括以下三种形式。
-* DatePicker
-* MonthPicker
-* RangePicker
+输入或选择日期的控件。
 
 ## 何时使用
 
@@ -16,6 +13,12 @@ subtitle: 日期选择框
 
 ## API
 
+日期类组件包括以下三种形式。
+
+* DatePicker
+* MonthPicker
+* RangePicker
+
 **注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
 
 ```jsx