如上圖所示，帶有快捷鍵的日期選擇器：

（1）設置快捷選項

View Code

<el-date-pickerv-model="createTime"type="daterange"align="right"unlink-panelsrange-separator="to"start-placeholder="start date"end-placeholder="end date":picker-options="pickerOptions2"></el-date-picker>

JS Code

export default {components: {advancedSearch,},data() {return {createTime：‘’，pickerOptions2: {shortcuts: [{text: 'Day before yesterday',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);picker.$emit('pick', [start, end]);},}, {text: 'Yesterday',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);picker.$emit('pick', [start, end]);},}],},}}

通過text 來修改快捷鍵名字，通過picker.$emit 設置選擇的時間段~

---

（2）設置默認時間

如果需要給時間默認值，直接 給 v-model 綁定的時間賦值即可：

比如：默認設置 昨天到今天的時間段

// 初始化時間initTime() {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);const startDate = start;const endDate = end;this.form.createTime = [];this.form.createTime.push(startDate);this.form.createTime.push(endDate);this.search();},

總結

以上是生活随笔為你收集整理的element UI 制作带快捷选项的时间选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。