时间控件

2019-10-28  本文已影响0人  家有饿犬和聋猫

import React, { Component } from 'react'
import { DatePicker } from 'antd'
import moment from 'moment'
import bind from 'react-autobind'
/**

*/

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);   
}

}

上一篇下一篇

猜你喜欢

热点阅读