element-ui 日期时间选择器点击左侧快捷切换不关闭pan

版本

element-ui 版本 ^2.13.2

问题描述

需求如下：想点击这个快捷切换不关闭时间选择pannel

image.png

查询官网只看到有个日期的参数

image.png
但是看了下element-ui 源码发现实际上还有另外一个参数，这个参数就是控制pannel是否显示的
image.png

因此加个参数true就行了，如下

        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], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end], true); // 第三个参数传个true就可以不关闭pannel了
            }
          }]
        },

顺带说一句

如果想要取消范围组件两个日期面板的联动，用这个属性 unlink-panels

image.png
image.png

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/546e5c3cb238?v=1718335422219，转载请注明出处，谢谢。

参考：
https://github.com/ElemeFE/element/blob/dev/packages/date-picker/src/picker.vue
https://element.eleme.cn/#/zh-CN/component/datetime-picker