import React, { Component } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
import bind from 'react-autobind'
/**
-
@description 时间筛选组件
-
@author hongpeiLi
-
传入参数:(必传)TimeFilterStart type:function
TimeFilterEnd type:function(可选) dateFormat 日期格式(String)如:YYYY-MM-DD
icon 图标 type 标签 如: <Icon type="warning" />
*/
export default class index extends Component {
static defaultProps = {
dateFormat: 'YYYY-MM-DD', // 时间格式
}
constructor(props) {
super(props)
this.state = {
startTime: '',
EndTime: '',
}
bind(this)
}
render() {
let { dateFormat,icon } = this.props
return (
<span>
<DatePicker
placeholder="开始日期"
format={dateFormat}
onChange= { this._TimeFilterStart }
suffixIcon = { icon }
disabledDate={this.disabledFilterStart}
/>
<DatePicker
placeholder="结束日期"
format={dateFormat}
onChange= { this._TimeFilterEnd }
disabledDate={this.disabledFilter}
suffixIcon = { icon }
defaultPickerValue = {moment(moment(this.state.startTime || new Date()).add(1, 'day'), dateFormat)}
/>
</span>
)
}
// 筛选禁用开始日
disabledFilterStart(current){
return current && current > moment()
}
// 筛选禁用结束日
disabledFilter(current){
return current.isBefore(moment(this.state.startTime).add(1, 'days')) || current.isAfter(moment().add(0, 'days'));
}
// 开始时间
_TimeFilterStart(time) {
this.setState({
startTime: time ? time.format(this.props.dateFormat) : ''
})
}
// 结束时间
_TimeFilterEnd(time) {
this.setState({
EndTime: time ? time.format(this.props.dateFormat) : ''
})
setTimeout(() => {
this.props.TimeFilterStart(this.state.EndTime)
this.props.TimeFilterEnd(this.state.startTime) // 开始时间始终大于结束时间,交换时间
}, 0);
}
}
网友评论