我正在构建一个约会计划程序，它使用下拉选择来选择一个人。假设 John Smith 和 flatpickr 选择一个日期。当我选择 John smith 时，他应该在 10 月 30 日下午 3 点到 5 点之间进行预约。因此，如果我想显示和禁用他在下午 3 点到 5 点之间不可用的按钮，并在他可用的时间显示其余按钮。我该如何解决这个问题？有我可以安装的 NPM 吗？我将要比较的时间是从 js 库的那一刻起。我正在使用 React Js，我从那个人那里得到的时间来自 Ajax 调用。
componentDidMount() {
let id = this.props.userId || this.props.match.params.id
const promise = userService.getUserIdNetwork(id)
promise.then(response => {
const coaches = []
const coachItems = response.item
coachItems.map(item => {
coaches.push({
value: item.connectionId
, label: `${item.firstName} ${item.lastName}`
})
this.setState({
options: coaches
, requesterId: id
})
})
})
// array of objects that have start AND end datetimes
//make the date with the appointment date
const startAndEndTimes = [
{startTime: moment().hour(12).minute(0).second(0), endTime: moment().hour(12).minute(59).second(59)}
, {startTime: moment().hour(1).minute(0).second(0), endTime: moment().hour(1).minute(59).second(59)}
, {startTime: moment().hour(2).minute(0).second(0), endTime: moment().hour(2).minute(59).second(59)}
, {startTime: moment().hour(3).minute(0).second(0), endTime: moment().hour(3).minute(59).second(59)}
, {startTime: moment().hour(4).minute(0).second(0), endTime: moment().hour(4).minute(59).second(59)}
, {startTime: moment().hour(5).minute(0).second(0), endTime: moment().hour(5).minute(59).second(59)}
, {startTime: moment().hour(6).minute(0).second(0), endTime: moment().hour(6).minute(59).second(59)}
, {startTime: moment().hour(7).minute(0).second(0), endTime: moment().hour(7).minute(59).second(59)}
, {startTime: moment().hour(8).minute(0).second(0), endTime: moment().hour(8).minute(59).second(59)}
, {startTime: moment().hour(9).minute(0).second(0), endTime: moment().hour(9).minute(59).second(59)}
, {startTime: moment().hour(10).minute(0).second(0), endTime: moment().hour(10).minute(59).second(59)}
, {startTime: moment().hour(11).minute(0).second(0), endTime: moment().hour(11).minute(59).second(59)}
, {startTime: moment().hour(12).minute(0).second(0), endTime: moment().hour(12).minute(59).second(59)}
]
console.log(startAndEndTimes)
const promise2 = appointmentsService.getAppointmentByDay(id, 10, 26, 7)
promise2.then(response => {
console.log(response)
response.items.forEach(timeObj => { //loops thru array of items to access appointmentDate by date. Coaches appointments
console.log(timeObj.appointmentDate)
debugger;
let appBegins = timeObj.appointmentDate;
let appEnds = timeObj.appointmentEndDate;
// get appEndTime as well
startAndEndTimes.forEach(arrTime => { // arr of times that will be compared to coaches times range
let slotBegins = arrTime.startTime._d
let slotEnds = arrTime.endTime._d
debugger;
if((appBegins > slotBegins) && (appBegins < slotEnds) || (appEnds < slotEnds) && (appEnds > slotBegins)){
return console.log("Not Available")
}else {
return console.log("Available Times")
}
})
this.setState({
dateFromApiCall: response.items
})
})
})
.catch(console.error)
}