在Ant Design 4中,可以使用moment.js库来处理日期和时间。下面是一个代码示例,展示了如何验证到期日期不能早于发行日期的实现方法:
import React, { useState } from "react";
import { DatePicker, Button, message } from "antd";
import moment from "moment";
const App = () => {
const [releaseDate, setReleaseDate] = useState(null);
const [expiryDate, setExpiryDate] = useState(null);
// 处理发行日期的变化
const handleReleaseDateChange = (date) => {
setReleaseDate(date);
};
// 处理到期日期的变化
const handleExpiryDateChange = (date) => {
setExpiryDate(date);
};
// 处理提交按钮点击事件
const handleSubmit = () => {
if (expiryDate && releaseDate) {
const isExpired = moment(expiryDate).isBefore(releaseDate);
if (isExpired) {
message.error("到期日期不能早于发行日期");
} else {
// 执行提交逻辑
message.success("提交成功");
}
} else {
message.error("请填写完整的日期");
}
};
return (
);
};
export default App;
在这个示例中,我们使用了Ant Design的DatePicker组件来选择发行日期和到期日期。在handleSubmit函数中,我们使用了moment.js库的isBefore方法来检查到期日期是否早于发行日期。如果是,就显示错误提示信息;否则,执行提交逻辑。
希望这个示例能帮到你!