文章讲述了如何在Vue.js应用中使用element-ui的DatePicker组件，监听其显示以及年月切换的事件。当DatePicker获得焦点或年月被切换时，会调用接口传入当前的年月参数以获取新数据。此外，还详细说明了如何绑定和处理四个切换按钮的点击事件来实现功能。
摘要生成于
，由 DeepSeek-R1 满血版支持，
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日期选择控件切换月份时触发方法
首先在template加如下代码
<el-calendar v-model="日期">
<template slot="dateCell" slot-scope="{date, data}">
<div class="date-cell" :class="data
.
isSelected ? 'is-selected' : ''">
<div class="calendar-day">
element
-
ui
DatePicker
年、月 选择改变时
获取
当前的
年月
最近遇一需求： 在打开 el日期选择组件时，根据选择
年月
获取
远程数据， 然后在日期上根据
获取
的数据设置状态提示， 如下图：
el原生只提供了pick事件， 只在日期选择后
触发
事件 ，未提供year和month的change事件，无法在改变月份和年份后立即
获取
最新数据。
思路1： 修改el 源码 新增year和month的change事件。
思路2：不修改源码 。 打开组件后 新增事件。
1
.
直接在月份面板选择月份时
2
.
点击
xml文件：
<
DatePicker
android:id="@+id/datep" android:layout_width="wrap_content" android:layout_height="wrap_content" />
java代码：
TextView textview2;
DatePicker
.
.
.
elementUI
封装的时间选择器
element
-
UI
的时间选择器如下图所示，通过type属性可以设置日期选择器的时间单位，可以以日、周、月、年为单位。这里二次封装时间选择器，让一个时间选择器可以选择以日，月，年为单位。
<div class="container">
<div class="block">
<span c
开始怀疑是事件问题。 以及控件内部源码有什么控制。 查看源码未发现有什么原因导致。 又换成了其他事件都不可以。 最后发现是本地时间修改造成的原因。 具体为什么因为时间导致事件失效还待排查。
.
.
.
v-model回显失效，使用el-date-picker组件选择日期后，无法在输入框内回显，检查发现绑定的值确实正确、格式也没有问题，但没有回显内容
官方文档说明的change事件就是不
触发
有clearable属性控制清空选择内容，但是没有对应的clear事件
使用v-bind:value回显，手写事件改变选择日期后对应的值（需要预先声明日期范围对应的属性为数组，对应位置上的值为空串，在事件中使用$set更改）
.
.
.
