mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 06:58:33 +08:00
63 lines
1.3 KiB
Markdown
63 lines
1.3 KiB
Markdown
---
|
|
order: 5
|
|
title:
|
|
zh-CN: 禁止选项
|
|
en-US: Disabled Time
|
|
---
|
|
## zh-CN
|
|
|
|
可以使用 `disabledHours` `disabledMinutes` `disabledSeconds` 组合禁止用户选择某个时间,配合 `hideDisabledOptions` 可以直接把不可选择的项隐藏。
|
|
|
|
## en-US
|
|
|
|
Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`.
|
|
|
|
````__react
|
|
import { TimePicker } from 'antd';
|
|
|
|
function range(start, end) {
|
|
const result = [];
|
|
for (let i = start; i < end; i++) {
|
|
result.push(i);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function disabledHours() {
|
|
const hours = range(0, 60);
|
|
hours.splice(20, 4);
|
|
return hours;
|
|
}
|
|
|
|
function disabledMinutes(h) {
|
|
if (h === 20) {
|
|
return range(0, 31);
|
|
} else if (h === 23) {
|
|
return range(30, 60);
|
|
}
|
|
return [];
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<div>
|
|
<TimePicker
|
|
disabledHours={disabledHours}
|
|
disabledMinutes={disabledMinutes}
|
|
placeholder="Just Disabled"
|
|
/>
|
|
<TimePicker
|
|
disabledHours={disabledHours}
|
|
disabledMinutes={disabledMinutes}
|
|
hideDisabledOptions
|
|
placeholder="Hide Directly"
|
|
/>
|
|
</div>
|
|
, mountNode);
|
|
````
|
|
|
|
<style>
|
|
#components-time-picker-demo-disable-options .ant-time-picker {
|
|
width: 120px;
|
|
}
|
|
</style>
|