Element Plus DatePicker 动态设置每周起始日

引言

在 Element Plus 的 DatePicker（日期选择器）组件中，日历视图默认以周日作为每周的第一天。然而我们需求需要根据参数动态设置，可以是周一或者周日。vue2的时候还有个firstDayOfWeek属性，但vue3的el-date-picker已经没有这个了，官网说的是需要通过设置国际化来实现。找了很多教程，设置的都没有效果啊，排完雷了后才实现。

环境准备

只装了Element-plus是不行的，还要确保您的项目中已经安装了dayjs：因为后面我们需要用到updateLocale

bash 复制代码

npm install dayjs
# 或
yarn add dayjs
# 或
pnpm add dayjs

核心实现步骤

1. 导入必要的依赖

javascript 复制代码

import dayjs from 'dayjs'
import updateLocale from 'dayjs/plugin/updateLocale'

// 注册 dayjs 插件
dayjs.extend(updateLocale)

2. 配置每周起始日

根据您的需求设置每周的起始日（0 或者7表示周日，1 表示周一，依此类推）：

javascript 复制代码

// 设置每周从周一开始（大多数欧洲国家习惯）
const weekStart = 1 // 0=周日, 1=周一, 2=周二, ..., 6=周六

// 更新英文区域设置
dayjs.updateLocale('en', {
  weekStart: weekStart
})

// 如果需要更新中文区域设置
dayjs.updateLocale('zh-cn', {
  weekStart: weekStart
})

3. js动态设置

我原来设置完后，英文语言别登录是可以的，但是简体中文，繁体，日文等都不生效。是因为踩了个雷

updateLocale后面的第一个参数locale，只需要固定是en就行，不需要设置为zh-cn等其他语言别。

js 复制代码

import dayjs from 'dayjs';

/**
 * 根据 ONEDAY 值计算 dayjs 的 weekStart
 * ONEDAY: '1'=星期一, '7'=星期日
 * dayjs weekStart: 1=星期一, 7=星期日（与 ONEDAY 一致）
 * @param {string|number} oneDay ONEDAY 值
 * @returns {number} weekStart 值
 */
function getWeekStartFromOneDay(oneDay) {
  const val = Number(oneDay);
  if (val >= 1 && val <= 7) return val;
  return 1; // 默认星期一
}

/**
 * 初始化 dayjs 的 weekStart 设置
 * 应在 compStore.getCompInfo() 之后调用
 * @param {string|number} 起始日的值
 */
export function initWeekStart(oneDay) {
  const weekStart = getWeekStartFromOneDay(oneDay);
  dayjs.updateLocale('en', { weekStart: weekStart });
}

简体设置周一效果：

日文设置周一效果：

总结

通过配置 dayjs 的 weekStart 属性，我们可以轻松修改 Element Plus DatePicker 的每周起始日。关键步骤包括：

安装必要依赖：Element Plus 和 dayjs
注册 dayjs 插件 ：updateLocale
更新区域设置 ：使用 dayjs.updateLocale('locale-name', { weekStart: value })
验证配置 ：通过 dayjs.localeData().weekStart() 检查是否生效

这种配置方式不仅适用于 DatePicker，还适用于所有基于 dayjs 的日期相关组件，提供了一致的日期处理体验。