引言

前几天了解到`day.js`的国际化，在我之前使用`day.js`时，几乎只能支持英文的format，对于周几的情况，我基本只能使用switch自己计算出对应值。

但是，在实现使用dayjs提供的国际化支持后，步骤就被大大简化了。同时，配合dayjs的Customization，基本可以实现任何自己想要的日期格式。

i18n

只要我们查看一下day.js源文件中的文件，就可以发现在locale文件夹下，有多种语言的支持。

在上图被圈出的部分，有简繁体的中文支持。打开文件，发现其中已经有多种已经被定义好的日期格式了，完全不需要我们自己去定义。

使用i18n

<script src="path/to/dayjs/locale/de"></script> 
<script>
    dayjs.locale('de') // use locale globally 
    dayjs().locale('de').format() // use locale in a specific instance 
</script>

上面为在浏览器使用的方式，详细的可以参考： day.js i18n

Customization

基于现有的locale进行修改

import dayjs from 'dayjs';
import preParsePostFormat from 'dayjs/plugin/preParsePostFormat';
dayjs.extend(preParsePostFormat);

// 引入zh-cn locale
import zhCNLocale from 'dayjs/locale/zh-cn';

// 基于原有组件进行修改
const locale = {
  ...zhCNLocale,
  
  // 以下加入你想要修改的属性
  name: 'zh-cn-t',

  ordinal: (n: number) => n,

};

// 加载组件
dayjs.locale(locale, void 0, true);

// 导出组件
export default locale;

使用自定义的locale

自定义的locale的使用方式和使用现有的locale的方法是相同的。 以下为在vue组件内使用的情形：

<template>
  <div class="home">
      {{ time}}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import dayjs from 'dayjs';
import '@/tools/zh-cn-t'

@Component({
})
export default class HomeView extends Vue {
    get time(){
      return dayjs().locale('zh-cn-t').format('dddd');
    }
}
</script>