element日期控件禁用年份

最新推荐文章于 2024-06-22 10:59:16 发布

kepler554

最新推荐文章于 2024-06-22 10:59:16 发布

阅读量919

点赞数

文章标签：前端 javascript vue elementui

本文链接：https://blog.csdn.net/weixin_56755798/article/details/126400376

版权

DOM操作 Element UI 年份限制 JavaScript pointer-events:none

关键词由CSDN通过智能技术生成

说明：

这个需求是禁用当前年份以后的年份，element不支持年份的禁用

这个方法是直接操作dom，用dom里面的值和当前年份去做判断，然后操作给比当前年份的大的dom做样式修改

html模块

<el-date-picker v-model="platform.solveTime" type="year" format="YYYY" value-format="YYYY"
            placeholder="请选择采购年份" style="width: 100%;" :focus="setfullyear" />
        </el-form-item>

js模块

当dom里面的值比当前日期年份大时，给dom设置es6的'pointer-events:none;'即可

const setfullyear = setTimeout(() => {
  dateBanner();
  let nextBtn = document.getElementsByClassName('el-picker-panel__icon-btn d-arrow-right')[0];
  let preBtn = document.getElementsByClassName('d-arrow-left el-picker-panel__icon-btn')[0];
  nextBtn.addEventListener('click', () => {
    dateBanner();
  });
  preBtn.addEventListener('click', () => {
    dateBanner();
  });
}, 0);
// 日期选择器自定义禁用判断。
const dateBanner = () => {
  let yearTds = document.getElementsByTagName('td');
  let index = 0;
  while (index < yearTds.length) {
    let curYearCell = yearTds[index].getElementsByClassName('cell');
    if (typeof (curYearCell) === 'undefined' || curYearCell.length === 0) {
      yearTds[index].style = 'pointer-events:none;';
    } else if (curYearCell[0].innerText > new Date().getFullYear()) {
      yearTds[index].style = 'pointer-events:none;';
      curYearCell[0].style.backgroundColor = '#f5f7fa'
    } else {
      curYearCell[0].style = '';
      yearTds[index].style = '';
    }
    index++;
  }
};