美文网首页
时间控件

时间控件

作者: 家有饿犬和聋猫 | 来源:发表于2019-10-28 15:33 被阅读0次

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

    }

    相关文章

      网友评论

          本文标题:时间控件

          本文链接:https://www.haomeiwen.com/subject/wtebvctx.html