el-date-picker中怎么实现日期模糊搜索
时间: 2023-12-01 22:41:50 浏览: 149
在el-date-picker中实现日期模糊搜索,可以通过设置picker-options属性来实现。具体步骤如下:
1.在el-date-picker标签中添加picker-options属性,并设置其为一个对象。
2.在picker-options对象中添加一个属性:shortcuts,该属性的值为一个数组。
3.在shortcuts数组中添加一个对象,该对象包含两个属性:text和onClick。
4.在text属性中设置快捷选项的名称,如“最近一周”。
5.在onClick属性中设置选中快捷选项后的回调函数,该函数中可以通过设置el-date-picker的value属性来实现日期的选择。
下面是一个示例代码:
```html
<el-date-picker
v-model="date"
type="daterange"
:picker-options="pickerOptions">
</el-date-picker>
```
```javascript
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]);
}
}]
}
};
}
```
阅读全文
相关推荐


















