ant Design 的 DatePicker 组件中的 RangePicker 组件提供了一个 disabledDate 属性用于控制禁用的时间范围,官方示例是直接返回以当前日期为基数的日期范围,那么如果指定某一日期,并且该日期之前的时间都不可选,该如何控制呢,上代码:
import { Row, Col, DatePicker } from 'antd';
function Demo (props) {
// 这个时间一般是接口返回,如果接口返回的是 'YYYY-MM-DD' 格式的时间
// 那么就需要在 disabledDate 方法里对时间做处理
// 原因就是 current 返回的时间格式是:
// Mon Oct 26 2020 17:45:06 GMT+0800 (中国标准时间)
const disabledEndDay = '2020-11-20';
const { RangePicker } = DatePicker;
function disabledDate(current) {
const disabledEndDay = new Date(disabledEndDate);
return current && current < disabledEndDay;
}
return (
<Row>
<Col span={24}>
<RangePicker disabledDate={disabledDate} />
</Col>
</Row>
)
}
export default Demo;