el-date-picker && datetimerange，选择非该月的日期，自动切换月份

最新推荐文章于 2024-06-20 16:31:05 发布

等下吃什么？

最新推荐文章于 2024-06-20 16:31:05 发布

阅读量192

点赞数 3

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_44240581/article/details/139125096

版权

 <el-date-picker
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="请选择开始日期"
    end-placeholder="请选择结束日期"
    @focus="handleFocus"
    @blur="handleBlur"
  />

 	handleFocus() {
      const pannel = document.querySelector('.el-picker-panel__body');

      if (pannel && !pannel.onclick) {
        pannel.onclick = (e) => {
          let classDom;

          if (e.target.nodeName === 'SPAN') {
            classDom = e.target.parentNode.parentNode;
          } else if (e.target.nodeName === 'DIV') {
            classDom = e.target.parentNode;
          }

          if (!classDom) {
            return;
          }

          const prevMonthIcon = document.querySelector('.el-date-range-picker__header .el-icon-arrow-left');
          const nextMonthIcon = document.querySelector('.el-date-range-picker__header .el-icon-arrow-right');

          if (classDom.className === 'prev-month') {
            prevMonthIcon.click();
          } else if (classDom.className === 'next-month') {
            nextMonthIcon.click();
          }
        }
      }
    },

    handleBlur() {
      const pannel = document.querySelector('.el-picker-panel__body');
      pannel.onclick = null;
    },