javascript - 如何在 react 日期选择器中禁用日期和时间？

Question

例如:今天是 8 月 23 日下午 4 点。 我将禁用日期设为 22(我使用了 minDate = {moment ().toDate ()})。在这种情况下如何使禁用时间达到 16(包括)？您不能选择比现在更早的日期和时间。 我使用 react-datepicker 和 moment 库。

代码在这里:https://stackblitz.com/edit/react-msygf9

class App extends Component {
  constructor() {
    super();
    this.state = {
      selected: new Date()
    };
  }

  handle = (date) => {
    this.setState({
      selectedDate: date
    })
  }

  render() {
    return (
      <div>
         <DatePicker
            selected={this.state.selected}
            onChange={this.handle}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={15}
            dateFormat="MMMM d, yyyy h:mm aa"
            timeCaption="time"
            minDate={moment().toDate()}
          />
      </div>
    );
  }
}

Answer 1

https://stackblitz.com/edit/react-hogvhv?file=index.js

我已经对此进行了测试，它可以按照您的要求工作。

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from 'moment';


class App extends Component {
  constructor() {
    super();
    this.state = {
      selected: new Date(),
      minTime: this.calculateMinTime(new Date())
    };
  }
  calculateMinTime = date => {
    let isToday = moment(date).isSame(moment(), 'day');
    if (isToday) {
        let nowAddOneHour = moment(new Date()).add({hours: 1}).toDate();
        return nowAddOneHour;
    }
    return moment().startOf('day').toDate(); 
}

  handle = (date) => {
    this.setState({
      selectedDate: date,
      minTime: this.calculateMinTime(date)
    })
  }

  render() {
    return (
      <div>
         <DatePicker
            selected={this.state.selected}
            onChange={this.handle}
            excludeOut
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={15}
            dateFormat="MMMM d, yyyy h:mm aa"
            timeCaption="time"
            minDate={new Date()}
            minTime={this.state.minTime}
            maxTime={moment().endOf('day').toDate()}
          />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));