React Datepicker 禁用日期的特定时间

Question

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

的动态数组

感谢大家的帮助

Answer 1

这是我使用 moment.js for easy date formatting. You need to change the state of excluded times on select specific date. To pass hours to function setHours and minutes to function setMinutes you can use 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

React Datepicker 禁用日期的特定时间

React Datepicker disable specific hour on a date

reactjs

datepicker

react-datepicker