element日期选择器快捷键设置
时间: 2023-11-18 17:53:48 浏览: 109
element-ui 日期范围选择器动态增加、保存记忆快捷选项
在 element-ui 的日期选择器中,可以通过设置 `shortcuts` 属性来添加快捷键。具体实现方法如下:
```html
<el-date-picker
v-model="date"
type="date"
:shortcuts="shortcuts">
</el-date-picker>
```
```javascript
data() {
return {
date: '',
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}
}
```
在 `shortcuts` 数组中,每个对象代表一个快捷键,其中 `text` 属性表示快捷键的文本,`onClick` 属性表示点击快捷键后的回调函数,可以在回调函数中设置日期选择器的值。
阅读全文