element UI 时间选择器,显示默认时间为当前时间至7天之前时间 (并格式化日期-年月日,时分秒)
时间: 2024-02-20 12:58:35 浏览: 21
好的,以下是示例代码:
```vue
<template>
<el-date-picker
v-model="date"
type="datetime"
:default-time="defaultTime"
:picker-options="pickerOptions"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</template>
<script>
export default {
data() {
const now = new Date();
const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
const defaultTime = [
new Date(sevenDaysAgo.getFullYear(), sevenDaysAgo.getMonth(), sevenDaysAgo.getDate(), 0, 0, 0),
new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds()),
];
return {
date: null,
defaultTime,
pickerOptions: {
shortcuts: [
{
text: '最近7天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近30天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近90天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
],
},
};
},
};
</script>
```
这里使用了 element-ui 的 `el-date-picker` 组件,并设置了 `type` 为 `datetime`,`format` 为 `yyyy-MM-dd HH:mm:ss`,`value-format` 也为 `yyyy-MM-dd HH:mm:ss`,以便格式化日期和时间。在 `data` 中,我们通过获取当前时间和7天前的时间,计算出默认时间 `defaultTime`,然后将其传递给 `el-date-picker` 组件的 `default-time` 属性。同时,我们还设置了 `pickerOptions`,以便提供一些快捷选项,如最近7天、最近30天、最近90天,以方便用户选择日期范围。