import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import moment from 'moment'
|
|
import './index.scss'
|
|
class QuarterPicker extends Component {
|
static propTpyes = {
|
card: PropTypes.object, // 搜索配置
|
onChange: PropTypes.func
|
}
|
|
state = {
|
year: moment().format('YYYY'),
|
selectQuarter: Math.ceil(moment().format('MM') / 3)
|
}
|
|
UNSAFE_componentWillMount () {
|
const { selectQuarter } = this.state
|
const { card } = this.props
|
|
if (card.initval && card.initval[0]) {
|
let _type = card.initval[0]
|
let _val = parseInt(card.initval[1])
|
|
if (_type === 'quarter' && _val) {
|
this.setState({selectQuarter: selectQuarter - _val})
|
}
|
}
|
}
|
|
changeYear = (type) => {
|
let _year = this.state.year
|
|
if (type === 'up') {
|
_year--
|
} else {
|
_year++
|
}
|
|
this.setState({
|
year: _year
|
})
|
}
|
|
changeQuarter = (quarter) => {
|
const { year } = this.state
|
|
let _stime = ''
|
let _etime = ''
|
if (quarter === 1) {
|
_stime = year + '-01-01'
|
_etime = year + '-03-31'
|
} else if (quarter === 2) {
|
_stime = year + '-04-01'
|
_etime = year + '-06-30'
|
} else if (quarter === 3) {
|
_stime = year + '-07-01'
|
_etime = year + '-09-30'
|
} else if (quarter === 4) {
|
_stime = year + '-10-01'
|
_etime = year + '-12-31'
|
}
|
|
|
this.setState({
|
selectQuarter: quarter
|
})
|
this.props.onChange([_stime, _etime])
|
}
|
|
render() {
|
const { year, selectQuarter } = this.state
|
|
return (
|
<div className="ant-calendar-picker-container ant-calendar-quarter-picker">
|
<div className="ant-calendar ant-calendar-month ant-calendar-month-calendar">
|
<div className="ant-calendar-month-calendar-content">
|
<div className="ant-calendar-month-header-wrap">
|
<div className="ant-calendar-header">
|
<div className="ant-calendar-month-panel">
|
<div>
|
<div className="ant-calendar-month-panel-header">
|
<span className="ant-calendar-month-panel-prev-year-btn" onClick={() => this.changeYear('up')} title="上一年"></span>
|
<span className="ant-calendar-month-panel-year-select">
|
<span className="ant-calendar-month-panel-year-select-content">{year}</span>
|
</span>
|
<span className="ant-calendar-month-panel-next-year-btn" onClick={() => this.changeYear('down')} title="下一年"></span>
|
</div>
|
<div className="ant-calendar-month-panel-body">
|
<table className="ant-calendar-month-panel-table">
|
<tbody className="ant-calendar-month-panel-tbody">
|
<tr onClick={() => this.changeQuarter(1)} className={selectQuarter === 1 ? 'ant-quarter-selected' : ''}>
|
<td title="一月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">一月</span>
|
</td>
|
<td title="二月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">二月</span>
|
</td>
|
<td title="三月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">三月</span>
|
</td>
|
</tr>
|
<tr onClick={() => this.changeQuarter(2)} className={selectQuarter === 2 ? 'ant-quarter-selected' : ''}>
|
<td title="四月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">四月</span>
|
</td>
|
<td title="五月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">五月</span>
|
</td>
|
<td title="六月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">六月</span>
|
</td>
|
</tr>
|
<tr onClick={() => this.changeQuarter(3)} className={selectQuarter === 3 ? 'ant-quarter-selected' : ''}>
|
<td title="七月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">七月</span>
|
</td>
|
<td title="八月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">八月</span>
|
</td>
|
<td title="九月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">九月</span>
|
</td>
|
</tr>
|
<tr onClick={() => this.changeQuarter(4)} className={selectQuarter === 4 ? 'ant-quarter-selected' : ''}>
|
<td title="十月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">十月</span>
|
</td>
|
<td title="十一月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">十一月</span>
|
</td>
|
<td title="十二月" className="ant-calendar-month-panel-cell">
|
<span className="ant-calendar-month-panel-month">十二月</span>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default QuarterPicker
|
