element-ui时间日期选择器 页面一进来初始值为最近一周,格式为年月日时分秒
时间: 2024-04-08 17:33:45 浏览: 68
如果你希望 Element-UI 时间日期选择器在页面一进来时的初始值为最近一周,并且格式为年月日时分秒,你可以使用以下代码来实现:
```html
<template>
<el-date-picker
v-model="dateRange"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
:value="initialValue"
format="yyyy-MM-dd HH:mm:ss"
></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>
```
在上述代码中,我们使用 `type="datetimerange"` 来选择日期时间范围,并且通过 `format` 属性指定日期时间的展示格式为 "yyyy-MM-dd HH:mm:ss"。
通过 `value` 属性设置初始值为 `initialValue`。在 `computed` 计算属性中,我们计算最近一周的起始和结束日期,并返回这个日期范围。
这样,当页面一进来时,Element-UI 时间日期选择器会显示最近一周的日期时间范围,并且格式为年月日时分秒。用户可以选择其他日期时间范围,但如果不选择,时间日期选择器会保持初始的最近一周时间范围。
阅读全文