el-date-picker设定初始值为当前一周
时间: 2025-05-08 14:09:26 浏览: 25
### 如何将 `el-date-picker` 的初始值设置为当前周的日期范围
为了实现将 `el-date-picker` 初始值设置为当前周的日期范围,可以通过 JavaScript 计算出当前周的起始日和结束日,并将其绑定到组件的 `v-model` 中。
以下是具体实现方法:
#### HTML 部分
```html
<el-form-item>
<el-date-picker
v-model="form.weekRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD">
</el-date-picker>
</el-form-item>
```
#### Vue 数据部分
在 `data` 中初始化 `weekRange` 属性为空数组:
```javascript
data() {
return {
form: {
weekRange: [] // 存储当前周的日期范围
}
};
}
```
#### 方法部分
通过计算函数获取当前周的起始日和结束日,并在页面加载时调用该函数完成默认值的设置。
```javascript
methods: {
getCurrentWeekRange() {
const now = new Date();
const dayOfWeek = now.getDay(); // 获取今天是星期几(0 表示星期天)
const diffDays = dayOfWeek === 0 ? -6 : -(dayOfWeek - 1); // 调整为周一作为一周的第一天
const startDate = new Date(now);
startDate.setDate(now.getDate() + diffDays);
const endDate = new Date(startDate);
endDate.setDate(endDate.getDate() + 6);
return [
this.formatDate(startDate),
this.formatDate(endDate)
];
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
},
mounted() {
this.form.weekRange = this.getCurrentWeekRange(); // 页面加载时设置默认值
}
```
上述代码中,`getCurrentWeekRange()` 函数用于计算当前周的起始日和结束日[^5]。`formatDate()` 是辅助函数,用来格式化日期为字符串形式以便于显示。
---
### 注意事项
- 如果需要支持动态更新默认值,则可以在触发事件后重新调用 `this.getCurrentWeekRange()` 并手动更新 `form.weekRange` 值。
- 使用 `$forceUpdate()` 或者 `$nextTick()` 可以确保视图及时同步数据变化[^1]。
---
### 示例效果
当页面加载完成后,`el-date-picker` 将自动填充当前周的日期范围,例如 `[2023-10-09, 2023-10-15]`。
---
阅读全文
相关推荐


















