您可以在
Antd的 `
DatePicker`
组件中使用 `onChange` 事件来捕获用户选择的日期和时间，然后使用 `moment
.js` 库来进行日期和时间的比较。
以下是一个示例，演示如何使用 `
DatePicker`
组件和 `moment
.js` 库来验证开始时间是否小于结束时间：
```
jsx
import
React, { useState } from '
react';
import {
DatePicker, Button, message } from '
antd';
import moment from 'moment';
function DateRangePicker() {
const [start
Date, setStart
Date] = useState(null);
const [end
Date, setEnd
Date] = useState(null);
function handleStart
DateChange(
date,
dateString) {
setStart
Date(
dateString);
}
function handleEnd
DateChange(
date,
dateString) {
setEnd
Date(
dateString);
}
function handleButtonClick() {
const startMoment = moment(start
Date, 'YYYY-MM-DD HH:mm');
const endMoment = moment(end
Date, 'YYYY-MM-DD HH:mm');
if (!startMoment
.isValid() || !endMoment
.isValid()) {
message
.error('请选择开始时间和结束时间');
return;
}
if (startMoment
.isAfter(endMoment)) {
message
.error('开始时间不能大于结束时间');
return;
}
// do something with valid
date range
message
.success('日期范围有效');
}
return (
<div>
<
DatePicker
showTime
format="YYYY-MM-DD HH:mm"
placeholder="开始时间"
onChange={handleStart
DateChange}
/>
<
DatePicker
showTime
format="YYYY-MM-DD HH:mm"
placeholder="结束时间"
onChange={handleEnd
DateChange}
/>
<Button onClick={handleButtonClick}>验证日期范围</Button>
</div>
);
}
```
在上面的示例中，我们使用了两个 `
DatePicker`
组件来让用户选择开始时间和结束时间。我们在这两个
组件上都设置了 `showTime` 和 `format` 属性，以便用户可以选择日期和时间，并且日期和时间的格式与您在问题中提供的格式一致。
当用户选择日期和时间时，我们会在 `onChange` 事件处理程序中捕获选择的日期和时间，并使用 `moment
.js` 将其格式化为 `YYYY-MM-DD HH:mm` 的格式。然后，我们将这些格式化后的日期和时间存储在 `start
Date` 和 `end
Date` 状态变量中。
当用户单击“验证日期范围”按钮时，我们将检查 `start
Date` 和 `end
Date` 是否都已选择，并且它们都是有效的日期和时间。如果它们不是有效的日期和时间，我们会显示一个错误消息。否则，我们将使用 `moment
.js` 来比较 `start
Date` 和 `end
Date`。如果 `start
Date` 大于 `end
Date`，则说明开始时间大于结束时间，我们将显示错误消息。否则，我们将说明日期范围有效，并执行其他操作（在示例中，我们只是显示了一个成功消息）。
希望这可以帮助您解决问题！
扫一扫
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
