elementUI DatePicker 日期选择面板显示周数的进一步说明

原创已于 2023-01-05 18:36:53 修改

· 4.6k 阅读

7 ·

版权

文章标签：

#vue #elementui

于 2021-03-30 19:44:34 首次发布

前端开发专栏收录该内容

13 篇文章

订阅专栏

elementUI 的周选择器不支持在日期选择面板中显示周序号，对比发现其他几个 UI 框架（antd-vue、vxe-table、iview、）倒是都有这个功能。早前有人给 elementUI 官方提了 issue，建议支持此 feature，貌似他们也做了尝试，但不知为何后来放弃了。既然如此，我们就自己想办法吧。

经过查询，根据该博主分项的文章：elementUI DatePicker 日期选择器周数显示（2.12.0版本）解决周数显示不正确及选中效果问题，并兼容选择器非week模式的正常运行 , 对源码进行修改后，选择器面板中已经能够显示周数了，但问题是无法快速、方便地应用到实际项目中。这位博主向 elementUI 官方提交的 PR 也没有被采纳，因此官方是指望不上了。同时此博主也提供了用户自己编译的方式来引用，但引用时需要在项目源码中单独存放一份完整的 elementUI 的代码，否则在多人协作开发时其他人重新执行 npm install 后修改会消失，而且如果官方发布了修复 bug 的版本，那么我们本地如果更新了最新的包之后也会丢失之前的修改。

为了避免此问题，我的方法是直接把 elementUI 最新版本（2.x）的 date-picker 源码复制一份到我们项目的 components 中，也就是只将 node_modules\element-ui\packages\date-picker 文件夹进行复制，然后按照该博主提供的方法在复制后的文件夹中进行修改后，还需要做以下几处修改，然后就可以直接在我们的项目中使用了，而且我们也可以随时更新最新的 elementUI 依赖以及重新执行npm install，不会对我们的修改有任何影响（除非官方对源码进行了大幅修改的情况下，我们只要做相应的微调即可），因为这个代码已经是我们项目源码的一部分了。

接下来开始继续修改：

1. 注释掉 src/components/date-picker/src/basic/time-spinner.vue line105 和 line109

// import ElScrollbar from 'element-ui/packages/scrollbar';

// components: { ElScrollbar },

2. 注释掉 src/components/date-picker/src/panel/time-select.vue line22 和 line77

// import ElScrollbar from 'element-ui/packages/scrollbar';

// components: { ElScrollbar },

若不做第1步和第2步，代码会报无法解析 jsx 语法的错误，我们为了求快，不再安装其他不必要的依赖。这几行代码是处理时间选择器的滚动条功能的，而我们现在只需要日期选择器，所以直接注释这几行代码不会对我们需要的功能产生影响，但是如果你还需要同时在修改后的日期选择器上使用时间选择器，请自行研究。

3. 修改 src/components/date-picker/index.js

import DatePicker from './src/picker/date-picker';

/* istanbul ignore next */
DatePicker.install = function install(Vue) {
  Vue.component('SBElDatePicker', DatePicker);
};

export default DatePicker;

4. 需要在 .eslintignore 中添加忽略 src/components/date-picker 文件夹，否则 eslint 可能会报出很多代码格式的错误和警告。

src/components/date-picker

5. 在 main.js 中全局注册该修改后的组件

import Vue from 'vue';
import ElementUI from 'element-ui';
import DatePicker from '@/components/date-picker'

Vue.use(ElementUI)
Vue.use(DatePicker)

当然也可以在组件中局部注册：

import SBElDatePicker from './src/picker/date-picker';

export default {
    components: {
        SBElDatePicker,
    }
}

6. 使用：注意，如果是全局注册的话，在模板中使用时需要按照第3步中 Vue.component('SBElDatePicker', DatePicker); 的第一个参数来引用该组件，也就是 SBElDatePicker，这是我们给修改后的新组件重新取的名称，目的是防止elementUI 自身的的 el-date-picker 组件被覆盖，这样的好处是可以根据自己的实际需要在项目中同时使用两者。

<SBElDatePicker
                @change="weekChange"
                :picker-options="{firstDayOfWeek: 1, disabledDate: disabledDate1, showWeekNumber: true }"
                v-model="week"
                type="week"
                format="yyyy 年第 WW 周"
                placeholder="选择周"
></SBElDatePicker>

7. 我们还可以根据自己的需要来修改面板的样式，在 src/style/main.scss 添加自定义样式：

.el-date-table.is-week-mode tr{
  &:not(.el-date-table__row) {
    th:first-child {
      //color: #d4d4d4;
      font-weight: bold;
    }
  }

  &.el-date-table__row {
    @mixin week () {
      margin-left: 2px;
      margin-right: 2px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.current td.week div {
      //color: #606266;
      font-weight: bold;
      background: #fff;
      color: #fff;
      span {
        background: #00754a;
        border-radius: 2px;
      }
    }

    &:hover td {
      &.week div {
        @include week;
      }

      &:nth-of-type(2) div {
        margin-left: 5px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }
    }

    td {
      &.week {
        cursor: unset;
        div {
          //color: #d4d4d4;
          @include week;
        }
      }
    }
  }
}

最后直接保存后就可以实时编译查看修改的效果了👇

我相信用 elementUI 做过两三个不是过于简单的项目的开发者都会发现这个UI库真是考验使用者的技术水平，总体来说功能谈不上完善、但 bug 是真不少，有些你认为必不可少的功能虽然自己修改源码也能实现，但是无形之中增加了工作量，降低了开发效率。而相较于其他竞争对手，真的没有什么优势可言，着实不是一个好的选择。珍爱生命，好自为之。

参考：elementUI DatePicker 日期选择器周数显示（2.12.0版本）解决周数显示不正确及选中效果问题，并兼容选择器非week模式的正常运行