如何在dayjs中覆写单个Locale属性 自定义每周第一天设置

我们在Web应用中允许用户修改偏好语言区域，目前通过如下变量设置dayjs的locale：

var localeAbbr = '@server_generated_abbr';
dayjs.locale(localeAbbr);

同时我们还支持用户自定义每周的第一天，该设置可能和对应locale的dayjs默认配置冲突，需要单独覆写firstDayOfWeek的本地化配置，待应用的变量如下：

var firstDayOfWeek = @server_generated_var;

已尝试方案及问题 #

我曾尝试通过如下方式配置：

dayjs.locale(localeAbbr, { weekStart: firstDayOfWeek  });

该方式仅在使用日期操作函数时正常生效，调用format()函数时会抛出JS错误：Cannot read property '7' of undefined，经查是dayjs已提交修复但尚未发版的库bug。

可用临时解决方案 #

目前我通过ASP.Net razor的写法临时解决了该问题：

dayjs.locale('@locale');
dayjs.Ls.@(locale).weekStart = @(firstDayOfWeek);

渲染后的实际运行代码如下，可正常生效：

dayjs.locale('en');
dayjs.Ls.en.weekStart = 1;

遇到相同bug的开发者可以参考该临时方案规避问题。

更通用的规范实现 #

如果需要不绑定后端模板语法的通用实现，可以采用如下写法：

var localeAbbr = '@server_generated_abbr';
var firstDayOfWeek = @server_generated_var;
// 先加载目标 locale
dayjs.locale(localeAbbr);
// 安全修改已加载的 locale 配置
if (dayjs.Ls?.[localeAbbr]) {
  dayjs.Ls[localeAbbr].weekStart = firstDayOfWeek;
}

该方案通过动态键名访问dayjs已注册的locale配置对象，不需要重新注册完整locale配置，既规避了现有bug，也兼容所有前端开发场景，同时增加了可选链判断避免locale未加载时的报错。

内容的提问来源于stack exchange，提问作者Jason Butera