el-date-picker设置选择的两个时间相差不能超过一个月
时间: 2023-08-03 09:35:01 浏览: 73
ngx-input-date-range-picker:角度输入日期范围选择器库
您可以使用`range-separator`和`range`属性来限制日期选择的范围。具体实现可以参考下面的代码示例:
```html
<template>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
:picker-options="pickerOptions"
:disabled-date="disabledDate"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
dateRange: [],
pickerOptions: {
shortcuts: [
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 30 * 24 * 3600 * 1000);
picker.$emit('pick', [start, end]);
}
}
]
}
};
},
methods: {
disabledDate(date) {
const currentDate = new Date();
const maxDate = new Date();
maxDate.setMonth(currentDate.getMonth() + 1);
return date > maxDate || date < new Date('2020-01-01');
}
}
};
</script>
```
上述代码中,`pickerOptions`中的`shortcuts`属性定义了一个名为“最近一个月”的快捷选项,点击该选项后,日期选择器会自动选择当前日期往前30天的日期范围。`disabledDate`方法用于禁用超出日期范围的日期。在本例中,我们禁用了2020年1月1日之前和当前日期之后一个月的所有日期。
阅读全文