美文网首页
时间控件

时间控件

作者: 家有饿犬和聋猫 | 来源:发表于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);   
}

}

相关文章

  • APP产品设计:时间、地点、人选择控件

    一、关于时间的控件分为两种:日期时间控件 和 日历控件。 日期时间控件:当选择的时间包含时分时会采用的控件。一般...

  • 时间控件

    self.voicetimeLabel.text = [NSString stringWithFormat:@"%...

  • 时间控件

    My97DatePicker 感觉这个插件还不错 国际化 因为工作要求,网站做了国际化,测试提了一个BUG,日期控...

  • 时间控件

    import React, { Component } from 'react'import { DatePick...

  • HTML5 input 新增的表单控件

    必填项验证 颜色选择控件 日期选择控件 时间选择控件 电子邮件控件:提交表单时有格式验证 数字控件 文件控件 拖拽...

  • angular 时间控件

    第一种:indrimuska/angular-moment-picker 地址:https://github.co...

  • bootstrap 时间控件

    bootstrap日期时间表单组件http://www.bootcss.com/p/bootstrap-datet...

  • 时间控件输入

    selenium.FindElementById("d1").Clear(); selenium.FindElem...

  • UIDatePicker简述

    // UIDatePicker控件的常用方法 时间选择控件 UIDatePicker *oneDatePicker...

  • 控件 时间の奥义

    根据客户大佬的需求,要求在移动端上进行数据统计。 数据需按照时间维度进行查看,包括每日、每月、每年和总生产周期几个...

网友评论

      本文标题:时间控件

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