vue带日期范围的日期选择器,如何显示YYYYMMDD格式的开始日期和结束日期
时间: 2024-02-23 07:01:43 浏览: 169
带有开始时间和结束时间的日期选择器
3星 · 编辑精心推荐
你可以使用 ElementUI 提供的日期选择器组件 `el-date-picker` 和 `el-date-range-picker`。在 `el-date-range-picker` 中,你可以通过设置 `value-format` 属性来指定日期的格式。具体实现步骤如下:
1. 在组件中引入 `el-date-range-picker` 组件:
```
<template>
<div>
<el-date-range-picker
v-model="dateRange"
type="daterange"
value-format="yyyyMMdd"
:picker-options="pickerOptions"
></el-date-range-picker>
</div>
</template>
```
2. 在 `data` 选项中声明 `dateRange` 和 `pickerOptions` 变量,并设置日期选择器的一些选项:
```
<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]);
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}
]
}
}
}
}
</script>
```
其中,`value-format` 属性指定日期的格式为 `yyyyMMdd`,`pickerOptions` 设置了一些快捷选项,你可以根据需求进行修改。
这样,你就可以显示出格式为 `yyyyMMdd` 的日期范围选择器了。
阅读全文