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;

}

}

}

},