import React, { useState } from 'react';
import { Row, Col, DatePicker } from 'antd';
import moment from 'moment';
export default function index(props) {
const { updateParams } = props;
const [gmtStartCreated, setGmtStartCreated] = useState();
const [gmtEndCreated, setGmtEndCreated] = useState();
const format = (m) => moment(m).format('YYYY-MM-DD HH:mm:ss');
const okStartHandler = (dateTime) => {
const formatted = format(dateTime);
setGmtStartCreated(formatted);
updateParams({ gmtStartCreated: formatted });
};
const okEndHandler = (dateTime) => {
const formatted = format(dateTime);
setGmtEndCreated(formatted);
updateParams({ gmtEndCreated: formatted });
};
const onStartChange = (date, strDate) => {
if (!date) {
setGmtStartCreated('');
updateParams({ gmtStartCreated: '' });
} else {
setGmtStartCreated(strDate);
updateParams({ gmtStartCreated: strDate });
}
};
const onEndChange = (date, strDate) => {
if (!date) {
setGmtEndCreated('');
updateParams({ gmtEndCreated: '' });
} else {
setGmtEndCreated(strDate);
updateParams({ gmtEndCreated: strDate });
}
};
const startDisabledDate = (current) => {
if (!gmtEndCreated) {
return false;
}
return current && current >= moment(gmtEndCreated);
};
const range = (start, end) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
const startDisabledDateTime = () => {
return {
disabledHours: () => {
if (!gmtEndCreated) {
return range(0, 0);
}
const date = new Date(gmtEndCreated);
const hours = date.getHours();
return range(hours + 1, 24);
},
disabledMinutes: () => {
if (!gmtEndCreated) {
return range(0, 0);
}
const date = new Date(gmtEndCreated);
const minutes = date.getMinutes();
return range(minutes + 1, 60);
},
disabledSeconds: () => {
if (!gmtEndCreated) {
return range(0, 0);
}
const date = new Date(gmtEndCreated);
const seconds = date.getSeconds();
return range(seconds, 60);
}
};
};
const endDisabledDate = (current) => {
if (!gmtStartCreated) {
return false;
}
return current && current <= moment(gmtStartCreated);
};
const endDisabledDateTime = () => {
return {
disabledHours: () => {
if (!gmtStartCreated) {
return range(0, 0);
}
const date = new Date(gmtStartCreated);
const hours = date.getHours();
return range(0, hours);
},
disabledMinutes: () => {
if (!gmtStartCreated) {
return range(0, 0);
}
const date = new Date(gmtStartCreated);
const minutes = date.getMinutes();
return range(0, minutes);
},
disabledSeconds: () => {
if (!gmtStartCreated) {
return range(0, 0);
}
const date = new Date(gmtStartCreated);
const seconds = date.getSeconds();
return range(0, seconds + 1);
}
};
};
return (
<div>
<Row>
<Col span={5}>任务创建时间:</Col>
<Col span={19}>
<DatePicker
placeholder="开始时间"
size="small"
onChange={onStartChange}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={startDisabledDate}
disabledTime={startDisabledDateTime}
showTime
onOk={okStartHandler}
/>
<span> 到 </span>
<DatePicker
placeholder="结束时间"
size="small"
onChange={onEndChange}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={endDisabledDate}
disabledTime={endDisabledDateTime}
showTime
onOk={okEndHandler}
/>
</Col>
</Row>
</div>
);
}
antd DatePicker 开始时间小于结束时间-精确到时分每秒
于 2022-09-01 13:25:42 首次发布