Days.js实时更新时间格式文案在切换全局语言之后的方案

背景：

当前在做项目，多语言支持，中文简体，中文繁体，英文；

技术栈：uni-app + vue3 (setup + composition api) + ts + vite5

其他的应该也可以参考下解决思路

问题描述

当我切换全局语言的时候，i18n文案没问题可以切换完语言后立刻生效，但是用了Days.js的时间文案格式，之前是中文的，切换成英文后，还是之前中文的。这不对啊！

问题根源

Changing the global locale doesn't affect existing instances.

就是Changing the global locale doesn't affect existing instances. (更改全局语言环境不会影响现有的 Day.js 实例。)

Day.js 实例和格式化字符串：当首次加载组件时，假设当前语言是中文，这时调用 dayjs(time).format('MMMM D, YYYY')。Day.js 根据当时的全局设置（中文）计算出一个固定的字符串（例如："10月28日, 2025"）。这个字符串被赋值给我们的 Vue 响应式数据或直接显示在模板中。

切换语言时：当切换语言时，我们的 i18n 库会更新文案，同时调用了 dayjs.locale('en') 来更新 Day.js 的全局设置。然而，这个操作只对未来新创建的 Day.js 实例或新的格式化操作有效。它不会自动去查找并重新计算你组件中已经生成的那个"10月28日, 2025"字符串。

简而言之：我们展示的不是 Day.js 实例，而是 Day.js 已经计算好的格式化结果字符串，这个字符串是非响应式的。

解决方案

直接上代码！

vue 复制代码

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const rawTime = ref('2025-10-28T10:00:00')

const formattedTime = computed(() => {
  const currentLocale = locale.value
  // 虽然我们在此之前已经通过全局语言切换组件切换过全局语言了，但是这里还是让它更改一下本地local的daysjs语言，
  // 纯为了响应式，拿到最新的dayjs的locale
  //【注意⚠️】这个currentLocale当前从vue-i18n得到的字段是否符合Days.js的locale字段，符合Days.js的是
  // 中文简体是：zh-cn，中文繁体有两个选择：zh-tw和zh-hk, 英文是：en
  // 可以看： https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
  return dayjs(rawTime.value).locale(currentLocale).format('LL')
})
</script>

<template>
  <view>{{ formattedTime }}</view>
</template>

这样你切换完全局语言后，这个时间字段也自动变化了

如果觉得写的好，解决了你的问题，辛苦点个赞！十分感谢！

参考来源：

Day.js TypeScript
Day.js i18n
Checking the current Day.js locale
Changing locales locally