iview中动态设置日期选择区间范围
html代码:
<Date-Picker
ref="datepicker"
type="daterange"
split-panels
placeholder="请选择日期"
style="width: 280px;"
separator="至"
:options="formatTime"
@click.native="changeFormat"
@on-change="changeTime">
</Date-Picker>
Js代码:
changeFormat(){
var tar = this.$refs["datepicker"].$refs["pickerPanel"];
// console.log("from:"+tar["rangeState"]["from"]);第一个日期
// console.log("to:"+tar["rangeState"]["to"]);第二个日期
if(tar["rangeState"]["from"]&&!tar["rangeState"]["to"]){//选择了第一个日期
var first = tar["rangeState"]["from"];
this.formatTime = {
disabledDate:function(value){
var date_start = new Date(first);
var date_end = new Date(first);
date_start.setDate(first.getDate() - 7);
date_end.setDate(first.getDate() + 7);
return !(value >= date_start && value <= date_end);
}
}
}else if(tar["rangeState"]["from"]==null){//点击输入框还原所有日期可选
this.formatTime = {
disabledDate:function(value){
return false;
}
}
}
},
