React中如何设置DatePicker的disable根据另一个DatePicker动态改变

今天在使用react的DatePicker组件时需要使用到时间的限制,使一个picker的时间在另一个之后,另一个在这个之前,双向进行绑定.

其中moment.js中有的方法用了很头疼,后来才发现是自己想歪了hhhh

这是两个时间选择框,官方文档上有props为disabledDate的参数类型为moment

<Form>        
       <Row className="start-date-row"><h5>Start Date</h5></Row>
       <Form.Item>
              {getFieldDecorator('startDate', {
                rules: [{ required: true, message: 'Please select a date' }],
              })(<DatePicker disabledDate={this.disableStartData} getCalendarContainer={triggerNode => triggerNode.parentNode} format="MMM DD, YYYY" />)}
        </Form.Item>
        <Row className="acceptance-deadline-row"><h5>Offer Acceptance Deadline</h5></Row>
        <Form.Item>
              {getFieldDecorator('acceptanceDeadline', {
                rules: [{ required: true, message: 'Please select an acceptance deadline for this offer' }],
              })(<DatePicker disabledDate={this.disableDeadLineData} getCalendarContainer={triggerNode => triggerNode.parentNode} format="MMM DD, YYYY" />)}
        </Form.Item>
 </Form>

刚开始一直不知道moment是什么以及什么类型,后来发现也是当做一个组件来引入的

使用npm来安装

sudo npm install moment

然后引入项目

import moment from 'moment';

然后就可以使用了

先看看react中disable的描述

什么鬼 返回的是一个boolean???

其实是返回true的地方就是不可见的区域,然后就是写方法啦

disableStartData = (time) => {
    if (this.props.form.getFieldValue('acceptanceDeadline') === undefined) {
      return time < moment().startOf('day');
    }
    return time < moment(this.props.form.getFieldValue('acceptanceDeadline')).endOf('day');
  }

  disableDeadLineData = (time) => {
    if (this.props.form.getFieldValue('startDate') === undefined) {
      return time < moment().startOf('day');
    }
    return time < moment().startOf('day') || time > moment(this.props.form.getFieldValue('startDate'));
  }

这里是根据另一个时间选择的props来判断当前的不可选择区域,本来觉得要写onChange函数,后来发现props在变化的同时,本身的属性也会随之改变,完全动态,这和之前的js感觉有点不一样,不过也算是优势哈哈,具体的moment方法就不说了,官方文档也说得比较清楚(然而并不是).不会的还是很多,慢慢学习把.