element-ui 时间日期选择初始值就是最近一周时间范围,不选的情况下
时间: 2023-10-19 07:43:15 浏览: 191
时间日期选择
如果你希望 Element-UI 时间日期选择器在初始状态下就显示最近一周的时间范围,可以使用 `value` 属性来设置初始值。以下是示例代码:
```html
<template>
<el-date-picker
v-model="dateRange"
type="daterange"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
:value="initialValue"
></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() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}
]
}
};
},
computed: {
initialValue() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
}
}
};
</script>
```
在上述代码中,我们使用 `value` 属性来设置初始值。通过计算属性 `initialValue`,我们将最近一周的起始和结束日期赋值给 `value` 属性。
这样,当时间日期选择器初始化时,就会显示最近一周的时间范围。用户可以选择其他日期范围,但如果不选择,时间日期选择器会保持初始的最近一周时间范围。
阅读全文