Merge pull request #691 from ant-design/update-time-picker

update time-picker to 1.0.0-alpha9

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

@@ -0,0 +1,39 @@
+# 禁止选项
+
+- order: 5
+
+限制选择 `20:30` 到 `23:30` 这个时间段。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+function newArray(start, end) {
+  let result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
+function disabledHours() {
+  let hours = newArray(0, 60);
+  hours.splice(20, 4);
+  return hours;
+}
+
+function disabledMinutes(h) {
+  if (h === 20) {
+    return newArray(0, 31);
+  } else if (h === 23) {
+    return newArray(30, 60);
+  } else {
+    return [];
+  }
+}
+
+ReactDOM.render(
+  <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} />
+, document.getElementById('components-time-picker-demo-disable-options'));
+````

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

@@ -0,0 +1,31 @@
+# 只显示部分选项
+
+- order: 6
+
+通过 `hideDisabledOptions` 将不可选的选项隐藏。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+function newArray(start, end) {
+  let result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
+function disabledMinutes(h) {
+  return newArray(0, 60).filter(value => value % 10 !== 0);
+}
+
+function disabledSeconds(h, m) {
+  return newArray(0, 60).filter(value => value % 30 !== 0);
+}
+
+ReactDOM.render(
+  <TimePicker disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} hideDisabledOptions />
+, document.getElementById('components-time-picker-demo-hide-options'));
+````

components/time-picker/demo/size.md

@@ -1,6 +1,6 @@
 # 三种大小
 
--	order: 6
+-	order: 2
 
 三种大小的输入框，大的用在表单中，中的为默认。
 

components/time-picker/demo/special-minutes.md

@@ -1,15 +0,0 @@
-# 特定选项
-
--	order: 3
-
-分钟只提供特定的选择，同时可以通过 `hourOptions` 和 `secondOptions` 对小时和秒进行特殊的限定。
-
----
-
-````jsx
-import { TimePicker } from 'antd';
-
-ReactDOM.render(
-  <TimePicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
-, document.getElementById('components-time-picker-demo-special-minutes'));
-````

components/time-picker/demo/value.md

@@ -1,6 +1,6 @@
 # 受控组件
 
-- order: 6
+- order: 1
 
 value 和 onChange 需要配合使用。
 

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

@@ -1,6 +1,6 @@
 # 不展示秒
 
--	order: 2
+-	order: 3
 
 不展示秒，也不允许选择。
 

components/time-picker/index.jsx

@@ -17,9 +17,10 @@ const AntTimePicker = React.createClass({
       },
       open: false,
       disabled: false,
-      hourOptions: undefined,
-      minuteOptions: undefined,
-      secondOptions: undefined,
+      disabledHours: undefined,
+      disabledMinutes: undefined,
+      disabledSeconds: undefined,
+      hideDisabledOptions: false,
       size: 'default',
       placement: 'bottomLeft',
       transitionName: 'slide-up',
@@ -91,6 +92,7 @@ const AntTimePicker = React.createClass({
     if (props.format.indexOf('HH') < 0) {
       props.showHour = false;
     }
+
     return (
       <TimePicker
         {...props}

components/time-picker/index.md

@@ -21,16 +21,17 @@ API
 ```
 
 | 参数                 | 说明 | 类型 | 默认值 |
-|-----------------|-----|-----|-------|
+|---------------------|-----|-----|-------|
 | defaultValue        | 初始默认时间 | string | 无 |
 | value               | 默认时间 | string | 无 |
 | placeholder         | 没有值的时候显示的内容 | string | "请选择时间" |
 | onChange            | 时间发生变化的回调     | function(Date value) | 无 |
 | format              | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
-| disabled        | 禁用 | bool | false |
-| hourOptions     | 特定可选择的小时 | array | 0 到 24 组成的数组 |
-| minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
-| secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
+| disabled            | 禁用全部操作 | bool | false |
+| disabledHours       | 禁止选择部分小时选项 | function() | 无 |
+| disabledMinutes     | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
+| disabledSeconds     | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
+| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
 | locale              | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
 
 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

package.json

@@ -58,7 +58,7 @@
     "rc-switch": "~1.3.1",
     "rc-table": "~3.6.2",
     "rc-tabs": "~5.5.0",
-    "rc-time-picker": "1.0.0-alpha6",
+    "rc-time-picker": "1.0.0-alpha9",
     "rc-tooltip": "~3.2.0",
     "rc-tree": "~0.19.0",
     "rc-trigger": "~1.0.6",

style/components/timepicker/Select.less

@@ -51,5 +51,13 @@
     &.@{timepicker-prefix-cls}-panel-select-option-selected {
       background: tint(@primary-color, 80%);
     }
+
+    &.@{timepicker-prefix-cls}-panel-select-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: @cursor-disabled;
+      }
+    }
   }
 }