el-date-picker 시작날짜 / 끝날짜 disable

---

template

 

<div>
  <el-date-picker
    v-model           = "listQuery.searchDateRange[0]"
    align             = "right"
    style             = "width: 170px;"
    :picker-options   = "pickerOptions[0]">
    </el-date-picker>
    <el-date-picker
    v-model           = "listQuery.searchDateRange[1]"
    align             = "right"
    style             = "width: 170px;"
    :picker-options   = "pickerOptions[1]">
  </el-date-picker>
</div>

---

data

 

data () {
	return {
    	listQuery : {
          searchDateRange : [ 
              new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1)
              , new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-1)
           ]
         }
    	, pickerOptions :[
          {   
            disabledDate: this.disabledDate0
            , onPick: this.pick
          } 
          , {   
            disabledDate: this.disabledDate1
            , onPick: this.pick
          }
        ]
      }
    }
}

---

method

 

pick({ maxDate, minDate }) {
	this.fromDate = minDate;
}
, disabledDate0(date) {
    if (this.listQuery.searchDateRange[1]) {
  		return this.listQuery.searchDateRange[1] < date;
    }
	return false;
} 


, disabledDate1(date) {
	if (this.listQuery.searchDateRange[0]) {
		return this.listQuery.searchDateRange[0] > date;
	}
	return false;
}

---