首页el-date-picker选择直接范围默认选择昨天

el-date-picker选择直接范围默认选择昨天

时间: 2025-02-12 14:13:42 浏览: 40

### 实现 `el-date-picker` 默认选择昨天的日期范围为了实现 `el-date-picker` 组件默认选择昨天的日期范围，可以通过 JavaScript 计算昨天的具体日期并将其赋值给组件的数据模型。以下是具体方法：对于单个日期的选择器，可以如下设置初始值[^4]： ```javascript created() { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); this.formList.borrowDate = yesterday.toISOString().substr(0, 10); } ``` 当涉及到日期区间（即 `type="daterange"`），则需准备两个表示昨天开始时间和结束时间的对象，并将它们作为数组传递给 `v-model` 属性。 HTML 部分保持不变，主要修改初始化逻辑来设定昨日的时间段[^3]: ```html <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker> ``` JavaScript 初始化代码应调整为计算昨天的确切时间段，并应用到 `data()` 函数返回的对象中: ```javascript export default { data() { return { dateRange: [], // 存储选中的日期范围 }; }, created() { let today = new Date(), oneDay = 24 * 60 * 60 * 1000; let startDate = new Date(today.getTime() - oneDay), endDate = new Date(startDate); this.dateRange = [ startDate.toISOString().slice(0, 10), endDate.toISOString().slice(0, 10) ]; } }; ``` 这段脚本会在页面加载时自动把昨天完整的那一天设为默认选定区域。通过这种方式，用户打开页面就能看到已经预填好的昨天整个日历天数作为起始和终止日期[^2]。

阅读全文