提交 ece8eaa7 编写于 作者: M MG12

update time-picker to 1.0.0-alpha9

上级 029890a5
# 禁止选项
- order: 5
禁止部分选项。
---
````jsx
import { TimePicker } from 'antd';
function disabledHours() {
return [0, 4, 8, 12, 16, 20];
}
function disabledMinutes(h) {
return [h % 60];
}
function disabledSeconds(h, m) {
return [h + m % 60];
}
ReactDOM.render(
<TimePicker defaultValue="12:08:23" disabledHours={disabledHours} disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} />
, document.getElementById('components-time-picker-demo-disable-options'));
````
# 隐藏选项
- order: 6
禁止部分选项。
---
````jsx
import { TimePicker } from 'antd';
function disabledHours() {
return [0, 4, 8, 12, 16, 20];
}
function disabledMinutes(h) {
return [h % 60];
}
function disabledSeconds(h, m) {
return [h + m % 60];
}
ReactDOM.render(
<TimePicker defaultValue="12:08:23" disabledHours={disabledHours} disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} hideDisabledOptions />
, document.getElementById('components-time-picker-demo-hide-options'));
````
# 三种大小 # 三种大小
- order: 6 - order: 2
三种大小的输入框,大的用在表单中,中的为默认。 三种大小的输入框,大的用在表单中,中的为默认。
......
# 特定选项
- 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'));
````
# 受控组件 # 受控组件
- order: 6 - order: 1
value 和 onChange 需要配合使用。 value 和 onChange 需要配合使用。
......
# 不展示秒 # 不展示秒
- order: 2 - order: 3
不展示秒,也不允许选择。 不展示秒,也不允许选择。
......
...@@ -17,9 +17,10 @@ const AntTimePicker = React.createClass({ ...@@ -17,9 +17,10 @@ const AntTimePicker = React.createClass({
}, },
open: false, open: false,
disabled: false, disabled: false,
hourOptions: undefined, disabledHours: undefined,
minuteOptions: undefined, disabledMinutes: undefined,
secondOptions: undefined, disabledSeconds: undefined,
hideDisabledOptions: false,
size: 'default', size: 'default',
placement: 'bottomLeft', placement: 'bottomLeft',
transitionName: 'slide-up', transitionName: 'slide-up',
...@@ -91,6 +92,7 @@ const AntTimePicker = React.createClass({ ...@@ -91,6 +92,7 @@ const AntTimePicker = React.createClass({
if (props.format.indexOf('HH') < 0) { if (props.format.indexOf('HH') < 0) {
props.showHour = false; props.showHour = false;
} }
return ( return (
<TimePicker <TimePicker
{...props} {...props}
......
...@@ -20,17 +20,18 @@ API ...@@ -20,17 +20,18 @@ API
<TimePicker defaultValue="13:30:56" /> <TimePicker defaultValue="13:30:56" />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------------|-----|-----|-------| |---------------------|-----|-----|-------|
| defaultValue | 初始默认时间 | string | 无 | | defaultValue | 初始默认时间 | string | 无 |
| value | 默认时间 | string | 无 | | value | 默认时间 | string | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" | | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(Date value) | 无 | | onChange | 时间发生变化的回调 | function(Date value) | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" | | format | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
| disabled | 禁用 | bool | false | | disabled | 禁用全部操作 | bool | false |
| hourOptions | 特定可选择的小时 | array | 0 到 24 组成的数组 | | disabledHours | 禁止选择部分小时选项 | function() | 无 |
| minuteOptions | 特定可选择的分钟 | array | 0 到 60 组成的数组 | | disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
| secondOptions | 特定可选择的秒 | array | 0 到 60 组成的数组 | | disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) | | 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> <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
{ {
"name": "antd", "name": "antd",
"version": "0.10.4", "version": "0.10.5",
"stableVersion": "0.10.4", "stableVersion": "0.10.5",
"title": "Ant Design", "title": "Ant Design",
"description": "一个 UI 设计语言", "description": "一个 UI 设计语言",
"homepage": "http://ant.design/", "homepage": "http://ant.design/",
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
"rc-switch": "~1.3.1", "rc-switch": "~1.3.1",
"rc-table": "~3.6.2", "rc-table": "~3.6.2",
"rc-tabs": "~5.5.0", "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-tooltip": "~3.2.0",
"rc-tree": "~0.19.0", "rc-tree": "~0.19.0",
"rc-trigger": "~1.0.6", "rc-trigger": "~1.0.6",
......
...@@ -51,5 +51,13 @@ ...@@ -51,5 +51,13 @@
&.@{timepicker-prefix-cls}-panel-select-option-selected { &.@{timepicker-prefix-cls}-panel-select-option-selected {
background: tint(@primary-color, 80%); background: tint(@primary-color, 80%);
} }
&.@{timepicker-prefix-cls}-panel-select-option-disabled {
color: @btn-disable-color;
&:hover {
background: transparent;
cursor: @cursor-disabled;
}
}
} }
} }
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册