mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 06:58:33 +08:00
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
6 |
|
zh-CN
可用 disabledDate
和 disabledTime
分别禁止选择部分日期和时间,其中 disabledTime
需要和 showTime
一起使用。
en-US
Disabled part of dates and time by disabledDate
and disabledTime
respectively, and disabledTime
only works with showTime
.
import { DatePicker } from 'antd';
const RangePicker = DatePicker.RangePicker;
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
function disabledDate(current) {
// can not select days before today and today
return current && current.valueOf() < Date.now();
}
function disabledDateTime() {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
function disabledRangeTime(_, type) {
if (type === 'start') {
return {
disabledHours: () => range(0, 60).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
};
}
return {
disabledHours: () => range(0, 60).splice(20, 4),
disabledMinutes: () => range(0, 31),
disabledSeconds: () => [55, 56],
};
}
ReactDOM.render(
<div>
<DatePicker
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
disabledTime={disabledDateTime}
showTime
/>
<br />
<RangePicker
disabledDate={disabledDate}
disabledTime={disabledRangeTime}
showTime={{ hideDisabledOptions: true }}
format="YYYY-MM-DD HH:mm:ss"
/>
</div>,
mountNode
);