<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element-ui</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div>
<span>只允許選明天及以後：</span>
<el-date-picker v-model="date" type="date" placeholder="選擇日期" :picker-options="pickerOptions1">
</el-date-picker>
<el-date-picker v-model="dates" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
<br>
<div>
<span>只允許選今天及以後：</span>
<el-date-picker v-model="date" type="date" placeholder="選擇日期" :picker-options="pickerOptions2">
</el-date-picker>
<el-date-picker v-model="dates" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期"
:picker-options="pickerOptions2">
</el-date-picker>
</div>
<br>
<div>
<span>只允許選今天及以前：</span>
<el-date-picker v-model="date" type="date" placeholder="選擇日期" :picker-options="pickerOptions3">
</el-date-picker>
<el-date-picker v-model="dates" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期"
:picker-options="pickerOptions3">
</el-date-picker>
</div>
<br>
<div>
<span>只允許選昨天及以前：</span>
<el-date-picker v-model="date" type="date" placeholder="選擇日期" :picker-options="pickerOptions4">
</el-date-picker>
<el-date-picker v-model="dates" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期"
:picker-options="pickerOptions4">
</el-date-picker>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
date: "",
dates: [],
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
pickerOptions2: {
disabledDate(time) {
let times = Date.now() - 24 * 60 * 60 * 1000;
return time.getTime() < times;
}
},
pickerOptions3: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
pickerOptions4: {
disabledDate(time) {
let times = Date.now() - 24 * 60 * 60 * 1000;
return time.getTime() > times;
}
},
}
})
</script>
</body>
</html>
