VUE中使用Moment Time-zone解决UTC时间跟本地时间的说明

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE中使用Moment Time-zone解决UTC时间跟本地时间的说明相关的知识,希望对你有一定的参考价值。

参考技术A

[toc]

默认情况下,Moment Timezone会缓存检测到的时区,也就是后续调用 moment.tz.guess() 将始终返回相同的值(即使在两次调用中已经更改了时区)。
要忽略缓存并使用新值覆盖缓存,需要调用带参数的方法:

使用方法: moment.tz(..., String) ,最后一个参数String是时区标识符:

创建的时刻具有不同的UTC时间,是因为这些时刻是在不同的时区创建的。

使用方法: moment(...).tz(String) ,String是时区标识符:

首先 moment(\'2021-08-20 10:00:00\') 即在默认时区中创建对象,然后 tz(String) 将其时区更改为指定的时区
创建的时刻具有相等的UTC时间,因为这些时刻是在默认时区中创建的

注意:上面两种方法得到不同结果的原因是因为传入的时间字符串 \'2021-08-20 10:00:00\' 本身是没有时区标识的,所以在转换的时候不同方法会加上不同的时区标识导致的差异,但是如果传入的时间本身就是能明确时间的 时间戳 UTC时间(\'2021-10-31T07:01:00Z\') 的话,这两种方法得到的结果就是一样的了。

注意:小写z格式化标记并不总是显示缩写的时区名称,而是显示每个区域的时间偏移。

注意:后续调用 moment.tz.setDefault 不会影响现有moment对象或其克隆。

官方文档

Vue modules, moment-timezone - 如何正确加载 moment-timezone 以及如何使用 2012-2022 数据

【中文标题】Vue modules, moment-timezone - 如何正确加载 moment-timezone 以及如何使用 2012-2022 数据【英文标题】:Vue modules, moment-timezone - How to load moment-timezone correctly and how to use the 2012-2022 data 【发布时间】:2018-12-18 23:01:18 【问题描述】:

我正在为我的 Vue 项目使用来自 vue-cli 的 webpack 模板,并且我在 npm 中安装了 moment 和 moment-timezone。

在我的单个文件组件中,我已经能够通过包含以下导入行来使用 moment-timezone:

import moment from 'moment'
import moment_timezone from 'moment-timezone'

moment_timezone 对象从未使用过,但它似乎需要存在才能让 moment.tz 函数工作。

我的问题是:

    这是在我的设置中加载时刻和时刻时区的正确方法吗? 如何仅加载来自 moment-timezone-with-data-2012-2022.min.js 的数据?我在 moment-timezone 包的 builds 目录中看到它,但我不清楚如何指定这是我想要使用的数据。

【问题讨论】:

【参考方案1】:

回答我自己的问题,因为我似乎已经解决了。

1 - 似乎moment-timezone需要使用moment,所以如果你要同时使用moment和moment-timezone,你可以简单地从moment-timezone模块中导入moment它会工作得很好。所以...

import moment from 'moment'
import moment_timezone from 'moment-timezone'

变成

import moment from 'moment-timezone'

2 - Moment-timezone 包含代表完整的 moment-timezone 代码以及 data/builds 下数据的特定版本的文件。您可以直接从这些文件中导入 moment-timezone,而无需在模块的根目录中导入 moment-timezone.js 文件。所以...

import moment from 'moment-timezone'

变成

import moment from 'moment-timezone/data/builds/moment-timezone-with-data-2012-2022.js'

【讨论】:

谢谢!这让生活变得轻松。对于任何想要在其 Vue 应用程序中全局使用 Moment 的人,您可以将其导入 app.js 文件中,然后将其添加为 Vue 实例属性。 import moment from 'moment-timezone'; Vue.prototype.$moment = moment; 然后您可以在花括号 $moment() 或方法 this.$moment() 中访问它。

以上是关于VUE中使用Moment Time-zone解决UTC时间跟本地时间的说明的主要内容,如果未能解决你的问题,请参考以下文章

vue使用moment格式转换日期

vue中使用moment.js

Vue里用moment.js

将 moment.js 与 vue.js 一起使用

【vue-cli】Moment插件

vue_cli自定义时间--moment插件