Created
September 25, 2017 09:29
-
-
Save fubobing126/97c85fc181d1ee0bb79d57fd3d6db2d4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Created by marginyu on 17/4/10. | |
*/ | |
import React,{Component, PropTypes} from 'react'; | |
import {DatePicker,Tag} from "antd"; | |
import moment from 'moment'; | |
const {RangePicker} = DatePicker; | |
const dateFormat = "YYYY-MM-DD"; | |
const {CheckableTag} = Tag; | |
class DateSelect extends Component{ | |
static propTypes = { | |
callback:PropTypes.func.isRequired,//选择日期后的回调 | |
hasThisWeek:PropTypes.bool,//本周 | |
hasRecentSevenDays:PropTypes.bool, | |
hasRecentThirtyDays:PropTypes.bool, | |
defaultFlag:PropTypes.number,//默认展示的单据日期; -999,不选中 | |
allowClear:PropTypes.bool,//是否有清除按钮 | |
style:PropTypes.object, | |
}; | |
static defaultProps = { | |
hasThisWeek:false, | |
hasRecentThirtyDays:true, | |
hasRecentSevenDays:true, | |
defaultFlag:3, | |
allowClear:false, | |
style:{display:'inline-block'}, | |
}; | |
// 构造 | |
constructor(props) { | |
super(props); | |
// 初始状态 | |
this.state = { | |
flag:this.props.defaultFlag, | |
}; | |
} | |
componentDidMount() { | |
//默认时间 | |
this.setDate(this.state.flag,true); | |
} | |
onChange = (dates,dateStrings)=>{ | |
this.setState({ | |
dates:dates, | |
flag:-999,//不选中标签 | |
},this.callback); | |
}; | |
setDate = (type, initFlag=false)=>{ | |
if(!initFlag && type == this.state.flag){ | |
return ; | |
} | |
let today = moment(); | |
let dates = [today]; | |
switch (type){ | |
case -1: | |
let last = moment().date(1).subtract(1,'days'); | |
let first = moment().date(1).subtract(1,'months'); | |
dates = [first,last];//上个月 | |
break; | |
case 0: | |
dates.unshift(moment().date(1));//本月 | |
//本月 | |
break; | |
case 1: | |
dates.unshift(moment().subtract(6,'days'));//近七天 | |
break; | |
case 2: | |
dates.unshift(moment().subtract(14,'days'));//近15天 | |
break; | |
case 3: | |
dates.unshift(moment().subtract(29,'days'));//近30天 | |
break; | |
case 4: | |
dates.unshift(moment().weekday(0));//本周 | |
break; | |
case -999: | |
dates = []; | |
break; | |
} | |
this.setState({ | |
dates, | |
flag:type | |
},this.callback); | |
}; | |
callback = ()=>{ | |
let rs = this.state.dates.map((item)=>{ | |
return item.format(dateFormat); | |
}); | |
if(rs.length==0) rs = ["",""]; | |
this.props.callback(rs); | |
}; | |
render(){ | |
return ( | |
<div style={this.props.style}> | |
<RangePicker | |
allowClear={this.props.allowClear} | |
style={{marginRight:10,verticalAlign:'middle'}} | |
value = {this.state.dates} | |
onChange={this.onChange}/> | |
{this.props.hasThisWeek? | |
<CheckableTag checked={this.state.flag == 4} onChange={()=>this.setDate(4)}>本周</CheckableTag> | |
:null} | |
<CheckableTag checked={this.state.flag == 0} onChange={()=>this.setDate(0)}>本月</CheckableTag> | |
<CheckableTag checked={this.state.flag == -1} onChange={()=>this.setDate(-1)}>上月</CheckableTag> | |
{ | |
this.props.hasRecentSevenDays? | |
<CheckableTag checked={this.state.flag == 1} onChange={()=>this.setDate(1)} >近7天</CheckableTag> | |
:null | |
} | |
{/**<CheckableTag checked={this.state.flag == 2} onChange={()=>this.setDate(2)} >近15天</CheckableTag>**/} | |
{ | |
this.props.hasRecentThirtyDays? | |
<CheckableTag checked={this.state.flag == 3} onChange={()=>this.setDate(3)} >近30天</CheckableTag> | |
:null | |
} | |
</div> | |
); | |
} | |
} | |
export default DateSelect; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment