element中的日期选择器,选择日期时,调用组件上方切换月份按钮的事件函数

element中的日期选择器,选择日期时,组件上方会有切换月份的按钮,elementUI本身没有提供这些按钮的事件函数,怎么才能调用这些按钮的事件函数??

img

希望在切换月份时,发送请求

因为是再组件层面提供对外的这种事件api,如果要用的话,我想到的就是改源码了

不改源码只能通过操作DOM的方式了

img

<template>
  <div id="app">
    <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      @focus="pickerFocus">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    pickerFocus () {
      this.datePickerEvent()
    },
    async datePickerEvent () {
      await this.$nextTick()
      const buttons = '[aria-label="前一年"], [aria-label="后一年"], [aria-label="上个月"], [aria-label="下个月"]'
      document.querySelectorAll(buttons).forEach(item => {
        item.addEventListener('click', e => {
          console.log(e.target.ariaLabel)
        })
      })
    }
  }
};
</script>

解决方法
调用onChange绑定函数,
在函数里面输出

console.log(e.target);

即为你输入框的值

如有问题及时沟通

自己写的