获取最近12个月；antd只能选择最近12个月的日期

timeData.jsx

import React, { Component } from 'react';

import moment from 'moment';
import { DatePicker } from 'antd';
const { MonthPicker } = DatePicker;
const dateFormatYM = 'YYYY-MM';

/**
 * 决策分析报表（决策支持）-反欺诈报表
 */
export default class AntiFraudReport extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectDateArr: []            //可选日期集合      ["2019-09", "2019-08", "2019-07", "2019-06", "2019-05", "2019-04", "2019-03", "2019-02", "2019-01", "2018-12", "2018-11", "2018-10"]
        };
    }

    componentDidMount() {
        this.getSelectDateArr();
    }

    /**
     * 判断日期是否可选择
     * @param current 每一个日期选择控件的节点日期
     * @returns {boolean} 返回true则不可选，false为可选日期
     */
    disabledDate =(current) => {
      
        let { selectDateArr } = this.state;         
        let dateItem = moment(current).format(dateFormatYM);               
        return !selectDateArr.includes(dateItem);           // 判断今年的每一个日期是否包含在selectDateArr中，包含就返回！true  ，显示可选
    };

    /**
     * 获取除本月外可选择近12个月份集合
     */
    getSelectDateArr =() => {
        let dataArr = [];
        let data = new Date();
        data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置data的月份
        for (let i = 0; i < 12; i++) {
            data.setMonth(data.getMonth() - 1);// 每次循环一次 月份值减1           
            let m = data.getMonth() + 1;      //因为上一步减1了，所以月份要加1
            m = m < 10 ? '0' + m : m;              
            dataArr.push(data.getFullYear() + '-' + (m));
        }
        this.setState({ selectDateArr: dataArr });
    };

    render() {
        return (
            <div>
                <MonthPicker disabledDate={this.disabledDate}   onChange={e => {this.props.timeData(e);}}  placeholder="请选择日期" />
            </div>
        );
    }
}

father.jsx

import React, { Component } from 'react';
import TimeData  from  '../timeData';
import moment from 'moment';

export default class modal extends Component {

    constructor(props) {
        super(props);
       this.state={
              reportDate: ''"
           }
      }

   timeData=(e) => {
        if (e === null) {
            this.setState({
                reportDate: '' "
            });
        } 
        else {
            this.setState({
                reportDate: moment(e).format('YYYY-MM')
            });
        }
    }
    render() {
        return (
            <div>
              报告日期：  <TimeData  timeData={(e)=>this.timeData(e)} />
           </div>
        );
    }
}

企业微信截图_20190918112537.png

企业微信截图_201909112601.png

企业微信截图_201918112549.png