直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<div id="app">
<el-date-picker
v-model="value"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data() {
return {
value: '',
timeOptionRange: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
if (minDate && !maxDate) {
this.timeOptionRange = minDate
}
if (maxDate) {
this.timeOptionRange = null
}
},
disabledDate: (time) => {
let secondNum = 30 * 24 * 60 * 60 * 1000
let timeOptionRange = this.timeOptionRange
if (timeOptionRange) {
return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum
}
}
}
}
}
});
</script>
</html>