import React, { Component, Fragment } from 'react'; import { Row, Col, Card, Input, Tag, Button, DatePicker, Divider, message } from 'antd'; import moment from 'moment'; const { MonthPicker } = DatePicker; export default class MonthMultiplePicker extends Component { constructor(props) { super(props); this.state = { selectedValues: props.value || [] } } handleClose = index => { const arr = [...this.state.selectedValues]; arr.splice(index, 1); this.setState({ selectedValues: arr, }, () => { this.props.onChange(this.state.selectedValues.map((item) => moment(item).format('YYYY-MM'))) }); } onStartChange = (value) => { if (!value || this.state.selectedValues.filter(item => moment(item).format('YYYY-MM') === moment(value).format('YYYY-MM')).length > 0) return; this.setState({ selectedValues: [...this.state.selectedValues, value], }, () => { this.props.onChange(this.state.selectedValues.map((item) => moment(item).format('YYYY-MM'))) }); } handleStartOpenChange = open => { this.setState({ endOpen: open }); }; state = { currentValue: null, selectedValues: [], endOpen: false } render() { const { startValue, endValue, endOpen } = this.state; return ( <Fragment> { this.state.selectedValues.map((item, index) => <Tag key={index} closable onClose={e => { e.preventDefault(); this.handleClose(index); }} >{moment(item).format('YYYY-MM')} </Tag>) } <MonthPicker placeholder="选择月份" style={{ width: 110 }} open={endOpen} onChange={this.onStartChange} onOpenChange={this.handleStartOpenChange} value={this.state.currentValue} /> </Fragment> ) } };