import React, { useState } from 'react';
import { DatePicker, message } from 'antd';
import moment from 'moment';
export default () => {
const [dates, setDates] = useState(null);
const disabledDate = (current) => {
if (!dates || !dates[0]) {
return null;
}
const [startDate, endDate] = dates;
if (startDate) {
const newEndDate = moment(startDate.format('YYYY-MM-DD HH:mm:ss')).add(10, 'hours');
return current.isAfter(newEndDate, 'days');
}
if (endDate) {
const newStartDate = moment(startDate.format('YYYY-MM-DD HH:mm:ss')).subtract(10, 'hours');
return current.isBefore(newStartDate, 'days');
}
};
const disabledTime = (_date, type) => {
if (!dates || !dates[0]) {
return null;
}
const [startDate, endDate] = dates;
if (type === 'start') {
const limitTime = endDate
? moment(endDate).subtract(10, 'hours')
: moment().subtract(10, 'hours');
return {
disabledHours: () => {
const hours = [];
for (let i = 0; i < 24; i++) {
if (i < moment().hour() || i > limitTime.hour()) {
hours.push(i);
}
}
return hours;
},
disabledMinutes: (hour) => {
if (hour < moment().hour() || hour > limitTime.hour()) {
return Array.from({ length: 60 }, (_date, i) => i);
}
const endMinute = endDate ? moment(endDate).minute() : 59;
const minutes = [];
for (let i = 0; i < 60; i++) {
if (hour === moment().hour() && i < moment().minute()) {
continue;
}
if (
(hour === limitTime.hour() && i > limitTime.minute()) ||
(hour === moment(endDate).hour() && i > endMinute)
) {
minutes.push(i);
}
}
return minutes;
},
disabledSeconds: (hour, minute) => {
if (
hour < moment().hour() ||
(hour === moment().hour() && minute < moment().minute()) ||
hour > limitTime.hour() ||
(hour === moment(endDate).hour() && minute > moment(endDate).minute())
) {
return Array.from({ length: 60 }, (_date, i) => i);
}
return [];
},
};
} else if (type === 'end') {
const startOfDay = moment(startDate).startOf('day');
const limitTime = moment(startDate).add(10, 'hours');
return {
disabledHours: () => {
const hours = [];
for (let i = 0; i < 24; i++) {
if (i < startOfDay.hour() || i > limitTime.hour()) {
hours.push(i);
}
}
return hours;
},
disabledMinutes: (hour) => {
if (hour < startOfDay.hour() || hour > limitTime.hour()) {
return Array.from({ length: 60 }, (_date, i) => i);
}
const startMinute = moment(startDate).minute();
const minutes = [];
for (let i = 0; i < 60; i++) {
if (hour === startOfDay.hour() && i < startMinute) {
continue;
}
if (
(hour === limitTime.hour() && i > limitTime.minute()) ||
(endDate &&
hour === moment(endDate).hour() &&
i >= moment(endDate).minute())
) {
minutes.push(i);
}
}
return minutes;
},
disabledSeconds: (hour, minute) => {
if (
hour < startOfDay.hour() ||
(hour === startOfDay.hour() && minute < startOfDay.minute()) ||
hour > limitTime.hour() ||
(endDate &&
hour === moment(endDate).hour() &&
minute >= moment(endDate).minute())
) {
return Array.from({ length: 60 }, (_date, i) => i);
}
return [];
},
};
}
};
return (
<DatePicker.RangePicker
placeholder={['开始时间', '结束时间']}
showTime
disabledDate={disabledDate}
disabledTime={disabledTime}
onCalendarChange={(val) => {
if (val) {
const [start] = val;
if (!start) return message.warning('开始时间不能为空');
}
setDates(val);
}}
onOpenChange={(open) => {
if (!open && dates) {
const [start, end] = dates;
if (!start || !end) {
setDates(null);
}
}
}}
style={{ width: '100%' }}
/>
);
};
