需求：防止時間範圍內的查詢到數據過多，希望設置最大可選一週的是時間範圍
完成效果：見下圖
知道了怎麼禁用時間，想要達到預期的效果，要拿到第一次選擇的日期
查看element文檔，onPick可返回每次選中的時間
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="../../public/common/css/index.css">
<link rel="stylesheet" href="../../public/common/css/iconfont/iconfont.css">
</head>
<body>
<div id="app">
<template>
<div class="block">
<span class="demonstration">默認</span>
<el-date-picker
v-model="value6"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="../../public/common/js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="../../public/common/js/index.js"></script>
<!--<script src="../../public/common/css/icon/iconfont.js"></script>-->
<script>
var vm =new Vue({
el: '#app',
data: {
vue : this,
value6: '',
timeOptionRange: '',
pickerOptions: {
disabledDate(time) {
let timeOptionRange = vm.timeOptionRange;
let secondNum = 60 * 60 * 24 * 7 * 1000;
if (timeOptionRange) {
return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
}
}, onPick(time) {
//當第一時間選中才設置禁用
if (time.minDate && !time.maxDate) {
vm.timeOptionRange = time.minDate;
}
if (time.maxDate) {
vm.timeOptionRange = null;
}
}
},
}
})
</script>
</html>