React Datepicker禁用日期的特定小时

Question

我使用https://reactdatepicker.com/。我想要实现的是排除特定日期的时间。我知道我们可以排除日期和时间，但有一种方法来结合两者，只禁用特定的时间在一个日期。例如，2021年3月5日取消18:30。我有一个动态数组的日期

谢谢你的帮助

Answer 1

这是我使用moment.js轻松格式化日期的解决方案。您需要在选择特定日期更改排除时间的状态。要将小时传递给setHours函数，将分钟传递给setMinutes函数，可以使用moment().toObject();https://momentjs.com/docs/#/displaying/as-object/

import React from "react";
import moment from "moment";
import DatePicker from "react-datepicker";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";
import "react-datepicker/dist/react-datepicker.css";
const arrDates = [
new Date(2021, 4, 20, 8, 15), //Thu May 20 2021 08:15:00
new Date(2021, 4, 20, 8, 45), //Fri May 20 2021 08:45:00
new Date(2021, 4, 21, 8, 30), //Sat May 21 2021 08:30:00
new Date(2021, 4, 21, 9, 0) //Sat May 21 2021 09:00:00
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedDate: setHours(setMinutes(new Date(2021, 4, 20, 8, 30), 0), 8),
excludedTimes: []
};
}
handleSelectedDate = (date) => {
this.setState({
selectedDate: date
});
};
getExcludedTimes = (date) => {
let arrSpecificDates = [];
for (let i = 0; i < arrDates.length; i++) {
if (
moment(date, moment.ISO_8601).format("YYYY/MM/DD") ===
moment(arrDates[i], moment.ISO_8601).format("YYYY/MM/DD")
) {
arrSpecificDates.push(moment(arrDates[i], moment.ISO_8601).toObject());
}
}
let arrExcludedTimes = [];
for (let i = 0; i < arrSpecificDates.length; i++) {
arrExcludedTimes.push(
setHours(setMinutes(new Date(arrSpecificDates[i].minutes),arrSpecificDates[i].hours)
);
this.setState({
excludedTimes: arrExcludedTimes
});
}
};
render() {
const { selectedDate, excludedTimes } = this.state;
return (
<div className="container">
<DatePicker
selected={selectedDate}
onChange={this.handleSelectedDate}
onSelect={this.getExcludedTimes}
popperPlacement="top-start"
dateFormat="dd/MM/yyy"
minDate={new Date()}
/>
<DatePicker
selected={selectedDate}
excludeTimes={excludedTimes}
onChange={this.handleSelectedDate}
onSelect={this.getExcludedTimes}
popperPlacement="top-start"
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeFormat="HH:mm"
dateFormat="hh:mm aa"
minDate={new Date()}
minTime={setHours(setMinutes(new Date(), 0), 8)}
maxTime={setHours(setMinutes(new Date(), 45), 14)}
/>
</div>
);
}
}
export default App;

查看完整实现:https://codesandbox.io/s/exclude-times-in-specific-dates-react-datepicker-o2ced?file=/src/App.js