Antd Range Picker组件提供了一个 onStartChange 回调函数,该函数会在起始日期改变时被调用。我们可以在该函数中判断新的起始日期是否在已选起始日期之前,如果是,则将新的起始日期设置为已选起始日期,并且更新开始时间范围。
代码示例:
import React, { useState } from 'react';
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
const ExampleRangePicker = () => {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const onStartChange = value => {
if (value.isBefore(endDate)) {
setStartDate(value);
} else {
setStartDate(endDate);
}
};
const onEndChange = value => {
if (value.isAfter(startDate)) {
setEndDate(value);
} else {
setEndDate(startDate);
}
};
const disabledDate = current => {
return current && current > moment().endOf('day');
};
return (
{
setStartDate(values[0]);
setEndDate(values[1]);
}}
onCalendarChange={(values) => {
if (values[1].isBefore(startDate)) {
setStartDate(values[1]);
setEndDate(values[1]);
}
}}
onOk={() => {
// Handle ok click
}}
/>
);
};
export default ExampleRangePicker;