Element UI DatePicker 监听年月切换按钮并获取变更-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI DatePicker 监听年月切换按钮并获取变更。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

在每切换一次年月时调用接口获取数据，传参为当前切换成的年月。

Element UI DatePicker 监听年月切换按钮并获取变更

需要监听DatePicker是否显示，用input获得焦点时触发的focus事件（element自带）。

并绑定4个切换按钮的click事件。

html：

              <el-date-picker
                v-model="datesvalue"
                type="dates"
                placeholder="选择工作日"
                :clearable="false"
                value-format='yyyy-MM-dd'
                @change="changeDate2($event)"
                :editable="false"
                class="datepicker1"
                @focus="isShow($event)"
              >
              </el-date-picker>

js：

    // 获取焦点 展示日期
    async isShow (e) {
      await this.$nextTick()
      this.monthChange()
      document.querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
        .forEach(item => item.addEventListener('click', () => {
          this.monthChange()
        }))
    },
    // 切换年月后重新调接口
    async monthChange () {
      let year, month
      // 获取年月
      year = document.querySelectorAll('.el-date-picker__header-label')[0].innerHTML.slice(0, 4)
      month = document.querySelectorAll('.el-date-picker__header-label')[1].innerHTML.slice(0, -1)
      if (Number(month) < 10) {
        // 10月之前都需要补0
        month = '0' + month;
      }
      this.datesYearMonth = year + '-' + month
      const { data } = await getWorkDay({
        month: this.datesYearMonth
      })
      if (data) {
        if (data.code === 200) {
          this.datesvalue = data.data
        }
      }
    },

参考：element-ui DatePicker 年、月选择改变时获取当前的年月_lingwueryao的博客-CSDN博客_element日期选择控件切换月份时触发方法文章来源地址https://www.toymoban.com/news/detail-507375.html

到了这里，关于Element UI DatePicker 监听年月切换按钮并获取变更的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！