element ui日期选择器筛选功能
时间: 2023-09-02 08:14:19 浏览: 59
Element UI日期选择器(DatePicker)有筛选功能,可以通过设置属性来实现。具体步骤如下:
1. 在需要使用DatePicker的组件中引入DatePicker组件:
```
<template>
<div>
<el-date-picker
v-model="date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@change="handleChange"
></el-date-picker>
</div>
</template>
<script>
import { DatePicker } from 'element-ui';
export default {
components: {
'el-date-picker': DatePicker,
},
data() {
return {
date: '', // 绑定的日期值
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]);
},
},
],
},
};
},
methods: {
handleChange(value) {
console.log(value);
},
},
};
</script>
```
2. 在data中定义一个pickerOptions对象,用于设置筛选选项。在本例中,定义了三个快捷筛选选项:最近一周、最近一个月、最近三个月。当用户选择某个选项时,会触发onClick事件,设置选择的日期范围。
3. 在el-date-picker组件上设置pickerOptions属性,指定筛选选项为pickerOptions对象。
4. 监听DatePicker的change事件,当用户选择日期时触发handleChange方法,可以在该方法中获取用户选择的日期值。