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 每一個日期選擇控件的節(jié)點日期
     * @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);// 每次循環(huán)一次 月份值減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>
        );
    }
}

企業(yè)微信截圖_20190918112537.png

企業(yè)微信截圖_201909112601.png

企業(yè)微信截圖_201918112549.png