mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
update time-picker to 1.0.0-alpha9
This commit is contained in:
parent
029890a5ab
commit
ece8eaa7ad
27
components/time-picker/demo/disable-options.md
Normal file
27
components/time-picker/demo/disable-options.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# 禁止选项
|
||||||
|
|
||||||
|
- 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'));
|
||||||
|
````
|
27
components/time-picker/demo/hide-options.md
Normal file
27
components/time-picker/demo/hide-options.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# 隐藏选项
|
||||||
|
|
||||||
|
- 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'));
|
||||||
|
````
|
@ -1,6 +1,6 @@
|
|||||||
# 三种大小
|
# 三种大小
|
||||||
|
|
||||||
- order: 6
|
- order: 2
|
||||||
|
|
||||||
三种大小的输入框,大的用在表单中,中的为默认。
|
三种大小的输入框,大的用在表单中,中的为默认。
|
||||||
|
|
||||||
|
@ -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'));
|
|
||||||
````
|
|
@ -1,6 +1,6 @@
|
|||||||
# 受控组件
|
# 受控组件
|
||||||
|
|
||||||
- order: 6
|
- order: 1
|
||||||
|
|
||||||
value 和 onChange 需要配合使用。
|
value 和 onChange 需要配合使用。
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# 不展示秒
|
# 不展示秒
|
||||||
|
|
||||||
- order: 2
|
- order: 3
|
||||||
|
|
||||||
不展示秒,也不允许选择。
|
不展示秒,也不允许选择。
|
||||||
|
|
||||||
|
@ -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({
|
|||||||
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
|
|||||||
<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>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"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 @@
|
|||||||
"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 @@
|
|||||||
&.@{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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user