1慷荔、需求
時(shí)間需要限制在當(dāng)前時(shí)間分鐘之前耗跛，比如：當(dāng)前時(shí)間是2020年3月31日23:25菊碟，那么時(shí)間選擇器可選的時(shí)間是：在2020年3月31日23:25 之前的。
2在刺、思路
因?yàn)槭褂玫氖?antd 的datePicker 組件逆害，該組件提供了兩個(gè)方法來做時(shí)間限制這件事，一個(gè)方法是 disabledDate, 用來限制日期蚣驼，返回值為 boolean, 另一個(gè)方法是 disabledTime 用來限制顯示的時(shí)間魄幕，返回是這樣的：
const disabledTime = () => {
return {
disabledHours: () => {} // 返回 需要disabled 的hours
disabledMinutes: () => {} // 返回 需要disabled 的 minutes
}
}
3、實(shí)踐
import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less';
const { RangePicker } = DatePicker;
const DateRangePicker = ({ onChange }) => {
const disabledHours = () => {
const hours = [];
for (let i = 23; i > moment().hour(); i--) {
hours.push(i);
}
return hours;
};
const disabledMinutes = currentDate => {
const currentMinute = moment().minute();
const currentHour = moment(currentDate).hour();
const minutes = [];
if (currentHour === moment().hour()) {
for (let i = 59; i > currentMinute; i--) {
minutes.push(i);
}
}
return minutes;
};
const disabledTime = (dateTime) => {
if (moment(dateTime).isBefore(moment(), 'day')) {
return {
disabledHours: () => [],
disabledMinutes: () => [],
};
}
if (moment(dateTime).isSame(moment(), 'day')) {
return {
disabledHours: () => disabledHours(dateTime),
disabledMinutes: () => disabledMinutes(dateTime),
};
}
};
return (
<RangePicker
format="YYYY/MM/DD HH:mm"
showTime
onChange={onChange}
disabledDate={(selectedDate) => moment(selectedDate).isAfter(moment(), 'day')}
disabledTime={disabledTime}
placeholder=""
className="date-picker"
/>
);
};
export default DateRangePicker;
