需求: 需要使选中时间范围控制在一个月内
<template>
<div>
<el-date-picker
v-model="dataForm.shiftDate"
unlink-panels
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="pickerOptions"
placeholder="选择日期范围">
</el-date-picker>
</div>
<template>
<script>
export default {
data () {
return {
startTime: '',
pickerOptions: {
onPick: ({maxDate, minDate}) => {
this.startTime = minDate
},
disabledDate: (time) => {
if(this.startTime) {
return new Date(time).getTime() >= (new Date(this.startTime).getTime() + 24 * 60 * 60 * 1000 * 30);
}
},
shortcuts: [{
text: '本周',
onClick(picker) {
var now = new Date();
var nowTime = now.getTime() ;
var day = now.getDay() || 7 //为周日的时候 day 修改为7 否则当天周天会有问题
var oneDayTime = 24*60*60*1000 ;
var MondayTime = new Date(nowTime - (day-1)*oneDayTime);//显示周一
var SundayTime = new Date(nowTime + (7-day)*oneDayTime) ;//显示周日
picker.$emit('pick', [MondayTime, SundayTime]);
}
}
...
}
}
文档说明: