Ant Design Vue的日历组件（Calendar）在中文语言包环境下设置以周日开始？

反复的大魔王2025-04-10 17:06

背景

这事情说起来也比较无奈，我这边接到一个定制化日期输入的组件的需求，原有的一些功能和样式不是很匹配，没办法只能用现有组件手撸一个。我当前的环境是Ant Design Vue 4.2.6版本。

我以为的

现在AI工具确实好用，我以为可以通过AI来简单实现。但事实是，AI不一定对，就算我告诉他具体的版本，他也未必能给我正确的答案。

结果

先说答案：在main.js文件或者你用到的Calendar组件中去设置（前提已经开启中文环境配置）

javascript 复制代码

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';// 或者 import {weekdaysMin} from 'dayjs/locale/zh-cn';weekdaysMin直接用于下方

// 扩展中文locale配置
dayjs.locale('zh-cn', {
  weekStart: 0, // 设置周日为每周第一天
  weekdaysMin: ["日", "一", "二", "三", "四", "五", "六"], // 自定义缩写
  monthsShort: [
    '1月', '2月', '3月', '4月', 
    '5月', '6月', '7月', '8月',
    '9月', '10月', '11月', '12月'
  ]
});

过程

我是怎么解决的呢？我是问了AI，也换了好几个AI，给我的答案都不是正确的，这点让我很失望，什么玩意，有的时候AI会给我一个不靠谱的答案。后来我发现他为什么这么做，是因为他会用历史资料来给我，真的很坑，但他自己说的头头是道。

同时，我也百度了他人写的，同样问题，我不知道他们怎么实现的，可能是版本不对吧。但在我这边确实没办法实现。

然后我就想到了去看源码，我现在了源代码去排查，但源码那么多，写的习惯跟我还不一样，费脑子啊。但我想，如果让AI来帮我看源码，给他材料，让他读源码来实现呢？然后就解决了这个问题，我也要到了我想要的答案。

所以，换个思路，AI不是衣来伸手的工具，还是要给他喂点东西的，这样才能更好用。