React Datepicker禁用日期的特定时间答案

【问题标题】：React Datepicker disable specific hour on a dateReact Datepicker禁用日期的特定时间
【发布时间】：2021-03-03 22:17:09
【问题描述】：

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

感谢大家的帮助

【问题讨论】：

尝试使用 cron 作业 npmjs.com/package/cron Cron 是一个可以让你按计划执行某事的工具。
感谢您的帮助，我会检查一下，但我想这是固定日期。我有一个动态的日期数组，我想禁用该数组上的日期和时间，这将是动态的

标签： reactjs datepicker react-datepicker

【解决方案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

【讨论】：