Element-UI DatePicker 控件定制星期标题文字

Element-UI DatePicker 控件定制星期标题文字

Element-UI组件库中， 日期控件是经常被使用到的。

问题

根据项目需求，需要定制DatePicker的控件的外观样式，并使用英文语言显示。同时需要定制日期选择面板中，星期标题的文字内容
如何支持多语言化，这里不做赘述。
默认英语的日期选择控件截图如下

目标

期望改成的星期文字样式

解决方案

星期标题的内容，只能通过修改element-ui的多语言资源文件才能达到目的，但是一般vue3的工程源码中，我们都是基于npm进行element-ui的依赖引入。所以要修改，只能建立私有库依赖引入。但仅为了这个修改，建立私有库未免小题大做。网看了下指南和文档，资源文件可以单独import，import的位置可以改为工程本地路径。即可解决问题。详细步骤如下

1. 打开vue3工程的man.js
2. 找到引入Element-ui多语言化的import代码

import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// language setting
locale.use(lang)

修改为

import lang from './assets/lang/en'
import locale from 'element-ui/lib/locale'
// language setting
locale.use(lang)

3. 找到 [工程目录]/node_modules/element-ui/src/locale/lang/en.js
4. 复制该文件到 [工程目录]/assets/lang/， 如果lang目录不存在，可以手动建立
5. 打开 [工程目录]/assets/lang/en.js文件，找到如下内容

weeks: {
        sun: 'Sun',
        mon: 'Mon',
        tue: 'Tue',
        wed: 'Wed',
        thu: 'Thu',
        fri: 'Fri',
        sat: 'Sat'
      }

改为

weeks: {
        sun: 'S',
        mon: 'M',
        tue: 'T',
        wed: 'W',
        thu: 'T',
        fri: 'F',
        sat: 'S'
      }

6. 保存

测试

npm run dev 或者 npm run build，就可以看到如下效果