element UI 制作带快捷选项的时间选择器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/84982611

如上图所示，带有快捷键的日期选择器：

（1）设置快捷选项

View Code

<el-date-picker
          v-model="createTime"
          type="daterange"
          align="right"
          unlink-panels
          range-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();
    },