el-date-picker进入页面默认显示今天到往前七天
时间: 2023-08-07 18:39:12 浏览: 65
Date input默认显示第几天日期
要实现el-date-picker进入页面默认显示今天到往前七天的日期范围,可以通过以下步骤实现:
1. 在组件的 `data` 中定义日期范围的起始值和结束值。
```javascript
data() {
return {
dateRange: [
new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000),
new Date()
]
}
}
```
2. 在组件的 `mounted` 生命周期中,将日期范围赋给 `el-date-picker` 的 `value` 属性。
```javascript
mounted() {
this.$nextTick(() => {
this.$refs.datePicker.picker.value = this.dateRange
})
}
```
3. 在模板中使用 `el-date-picker` 并设置 `ref` 属性,以便在 `mounted` 生命周期中访问它。
```html
<el-date-picker
ref="datePicker"
v-model="dateRange"
type="daterange"
></el-date-picker>
```
通过以上步骤,el-date-picker 进入页面时默认显示今天到往前七天的日期范围。
阅读全文