Vue+element日期範圍選擇控件，隻能選擇30天
代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div id="app">
<el-date-picker v-model="dateRange" :picker-options="pickerOptions" type="daterange" range-separator="至"
start-placeholder="開始日期" end-placeholder="結束日期">
</el-date-picker>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: function () {
return {
pickerMinDate: '',
dateRange: [],
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.pickerMinDate = minDate.getTime()
if (maxDate) {
this.pickerMinDate = ''
}
},
disabledDate: (time) => {
if (this.pickerMinDate !== '') {
const day30 = (30 - 1) * 24 * 3600 * 1000
let maxTime = this.pickerMinDate + day30
if (maxTime > new Date()) {
maxTime = new Date()
return time.getTime() > maxTime || time.getTime() < this.pickerMinDate - day30
} else {
return maxTime < time.getTime() || time.getTime() < this.pickerMinDate - day30
}
}
return time.getTime() > Date.now()
}
}
}
}
})
</script>
</body>
</html>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)