如何在反应日期选择器中禁用日期和时间？答案

【问题标题】：How to make disabled date and time in react datepicker?如何在反应日期选择器中禁用日期和时间？
【发布时间】：2019-08-23 01:12:32
【问题描述】：

例如：今天是 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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs momentjs react-datepicker

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

【讨论】：

谢谢，这拯救了我的一天！我正要问同样的问题。