JS进行时间格式化

发表于 更新于 阅读次数： 本文字数： 951 阅读时长 ≈ 2 分钟

最近WEB中对于时间格式化有了个性化需求，解决的同时，这里记录下。

需求一：走0时区

为了时间显示统一化，要求按照0时区时间展示，因为之前我们都是封装统一的轮子-使用momentJS做的日期格式化，所以只需要在WEB启动时做下时区设定即可。

1
2
3

moment.tz.setDefault('Africa/Abidjan');

注意：Africa/Abidjan即是0时区

需求二：时间显示格式按照系统所在国家风格，时区统一

如果是en-us即en

1
2
3
2/3/2020
February 3, 2020 at 3:18 PM

如果是en-gb

1
2
3
03/02/2020
3 February 2020 at 15:17

因为要求时区还需要维持0时区，只是显示的形式按照国家走，所以无法直接利用moment就实现，因为moment格式化要么按照既定的时区走，要么就需要手动提供显示格式，很不方便，最后发现JS原生就有toLocaleDateString函数。

于是方案就出来了

1
2
3
4
5
6
7
8
9
10
11
# 日期
moment().toDate().toLocaleDateString(navigator.language, {
  timeZone: moment.defaultZone.name
})

# 日期加时间
moment().toDate().toLocaleDateString(navigator.language, {
  timeStyle: 'short',
  dateStyle: 'long',
  timeZone: moment.defaultZone.name
})

浏览器语言

如上，既然支持了多区域时间格式化，如何测试呢。这就需要了解浏览器语言设定。这里有几点说明下

  1. 浏览器作为应用程序，安装时，缺省语言走的就是系统语言
  2. 浏览器本身支持个性化设定语言，所以浏览器语言可以与系统语言存在差异，但作为一个WEB，永远保持与浏览器一致，或者特殊需要，比如就一种语言等，这都说得通。所以并不需要跟着系统语言走。
  3. 比如，Chrome语言如何设定，戳这里
  4. 假如Chrome中我们将第一个语言按照如上例子的修改，刷新WEB即可测试显示效果

写在最后

虽是一个小问题，但这里记录下。