docs: update demos for TimePicker

components/date-picker/index.en-US.md

@@ -53,6 +53,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | open | open state of picker | bool | - |
 | onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
 | showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
+| disabledTime | to specify the time that cannot be selected | function(date) | - |
 
 ### MonthPicker
 

components/date-picker/index.zh-CN.md

@@ -54,6 +54,7 @@ moment.locale('zh-cn');
 | open | 控制弹层是否展开 | bool | - |
 | onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |
 | showTime     | 增加时间选择功能  | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
+| disabledTime | 不可选择的时间 | function(date) | 无 |
 
 ### MonthPicker
 

components/time-picker/demo/addon.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 6
 title:
   zh-CN: 附加内容
   en-US: Addon
@@ -23,6 +23,7 @@ ReactDOM.render(
         Ok
       </Button>
     )}
-  />
-, mountNode);
+  />,
+ mountNode
+);
 ````

components/time-picker/demo/basic.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-最简单的用法。
+点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
 
 ## en-US
 
-The most basic usage.
+Click `TimePicker`, and then we could select or input a time in panel.
 
 ````jsx
 import { TimePicker } from 'antd';
@@ -20,7 +20,5 @@ function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
-ReactDOM.render(
-  <TimePicker onChange={onChange} />
-, mountNode);
+ReactDOM.render(<TimePicker onChange={onChange} />, mountNode);
 ````

components/time-picker/demo/disable-options.md

@@ -2,20 +2,20 @@
 order: 5
 title:
   zh-CN: 禁止选项
-  en-US: Specify the time that cannot be selected
+  en-US: Disabled Time
 ---
 ## zh-CN
 
-限制选择 `20:30` 到 `23:30` 这个时间段。
+可以使用 `disabledHours` `disabledMinutes` `disabledSeconds` 组合禁止用户选择某个时间，配合 `hideDisabledOptions` 可以直接把不可选择的项隐藏。
 
 ## en-US
 
-You can't select the time from `20:30` to `23:30`.
+Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`.
 
 ````jsx
 import { TimePicker } from 'antd';
 
-function newArray(start, end) {
+function range(start, end) {
   const result = [];
   for (let i = start; i < end; i++) {
     result.push(i);
@@ -24,21 +24,27 @@ function newArray(start, end) {
 }
 
 function disabledHours() {
-  const hours = newArray(0, 60);
+  const hours = range(0, 60);
   hours.splice(20, 4);
   return hours;
 }
 
 function disabledMinutes(h) {
   if (h === 20) {
-    return newArray(0, 31);
+    return range(0, 31);
   } else if (h === 23) {
-    return newArray(30, 60);
+    return range(30, 60);
   }
   return [];
 }
 
 ReactDOM.render(
-  <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} />
-, mountNode);
+  <div>
+    <em>Just Disabled: </em>
+    <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} /><br />
+    <em>Hide Directly: </em>
+    <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} hideDisabledOptions />
+  </div>,
+  mountNode
+);
 ````

components/time-picker/demo/disabled.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 3
 title:
   zh-CN: 禁用
   en-US: disabled
@@ -19,6 +19,7 @@ import { TimePicker } from 'antd';
 import moment from 'moment';
 
 ReactDOM.render(
-  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />
-, mountNode);
+  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />,
+  mountNode
+);
 ````

components/time-picker/demo/hide-column.md

@@ -0,0 +1,26 @@
+---
+order: 4
+title:
+  zh-CN: 隐藏某列
+  en-US: Hide Column
+---
+
+## zh-CN
+
+TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
+
+## en-US
+
+While part of `format` is omitted, the corresponding column in panel will disappear, too.
+
+````jsx
+import { TimePicker } from 'antd';
+import moment from 'moment';
+
+const format = 'HH:mm';
+
+ReactDOM.render(
+  <TimePicker defaultValue={moment('12:08', format)} format={format} />,
+  mountNode
+);
+````

components/time-picker/demo/hide-options.md

@@ -1,38 +0,0 @@
----
-order: 6
-title:
-  zh-CN: 只显示部分选项
-  en-US: Show part of options.
----
-
-## zh-CN
-
-通过 hideDisabledOptions 将不可选的选项隐藏。
-
-## en-US
-
-use `hideDisabledOptions` to hide the disabled options.
-
-````jsx
-import { TimePicker } from 'antd';
-
-function newArray(start, end) {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    result.push(i);
-  }
-  return result;
-}
-
-function disabledMinutes() {
-  return newArray(0, 60).filter(value => value % 10 !== 0);
-}
-
-function disabledSeconds() {
-  return newArray(0, 60).filter(value => value % 30 !== 0);
-}
-
-ReactDOM.render(
-  <TimePicker disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} hideDisabledOptions />
-, mountNode);
-````

components/time-picker/demo/size.md

@@ -2,7 +2,7 @@
 order: 2
 title:
   zh-CN: 三种大小
-  en-US: Three sizes
+  en-US: Three Sizes
 ---
 
 ## zh-CN
@@ -22,6 +22,7 @@ ReactDOM.render(
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode
+);
 ````

components/time-picker/demo/value.md

@@ -2,7 +2,7 @@
 order: 1
 title:
   zh-CN: 受控组件
-  en-US: Under control
+  en-US: Under Control
 ---
 
 ## zh-CN
@@ -11,25 +11,25 @@ value 和 onChange 需要配合使用。
 
 ## en-US
 
-`Value` and `onChange` should be used together,
+`value` and `onChange` should be used together,
 
 ````jsx
 import { TimePicker } from 'antd';
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      value: null,
-    };
-  },
-  onChange(time) {
+class Demo extends React.Component {
+  state = {
+    value: null,
+  };
+
+  onChange = (time) => {
     console.log(time);
     this.setState({ value: time });
-  },
+  }
+
   render() {
     return <TimePicker value={this.state.value} onChange={this.onChange} />;
-  },
-});
+  }
+}
 
-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````

components/time-picker/demo/without-seconds.md

@@ -1,25 +0,0 @@
----
-order: 3
-title:
-  zh-CN: 不展示秒
-  en-US: Hide the seconds options
----
-
-## zh-CN
-
-不展示秒，也不允许选择。
-
-## en-US
-
-The `seconds` options are hidden and cannot be selected.
-
-````jsx
-import { TimePicker } from 'antd';
-import moment from 'moment';
-
-const format = 'HH:mm';
-
-ReactDOM.render(
-  <TimePicker defaultValue={moment('12:08', format)} format={format} />
-, mountNode);
-````