前言

公司是跨國公司，一個表單提交的時間，需要帶時區(qū)。才可以在不同地方正確顯示時間；

一、基本時間概念

UTC ， GMT

GMT是前世界標準時，UTC是現(xiàn)世界標準時。

UTC 比 GMT更精準，以原子時計時，適應(yīng)現(xiàn)代社會的精確計時。

但在不需要精確到秒的情況下，二者可以視為等同。

每年格林尼治天文臺會發(fā)調(diào)時信息，基于UTC。

本地時間

在日常生活中所使用的時間我們通常稱之為本地時間。這個時間等于我們所在（或者所使用）時區(qū)內(nèi)的當?shù)貢r間，它由與世界標準時間（UTC）之間的偏移量來定義。這個偏移量可以表示為 UTC- 或 UTC+，后面接上偏移的小時和分鐘數(shù)。

為了方便比較，圖中黑色背景的是 中國（China）區(qū)電腦，白色主題背景的是美國（US）區(qū)電腦）

2023-06-27T14:00:00.000Z

這種帶有T，Z 的是世界標準時間，其中Z表示默認時區(qū)（下面兩部電腦顯示，用的是當前所在地的時區(qū)）

二、實際案例

表單填寫后傳給后端的時間格式（Moment Timezone 方式）

Moment Timezone 中文文檔
Moment Timezone 官方英文文檔
安裝：

pnpm install moment-timezone

使用： 在這里插入代碼片
如果只考慮高版本瀏覽器
Intl.DateTimeFormat().resolvedOptions().timeZone ， 可以獲取時區(qū)name

下面 moment-timezone 寫一個function

import moment from 'moment-timezone'
export const formatByMomentTimezone = (time) => {
  console.log('Time:', time)
  // set true：not get Cache
  let timezoneName = moment.tz.guess(true)
  // 首先調(diào)用 Intl.DateTimeFormat().resolvedOptions().timeZone
  console.log('timezoneName', timezoneName)
  const resDate = moment.tz(time, timezoneName)?.format()
  return resDate || ''  //
}

案例用的是element plus 的 datetime 組件，所以入?yún)橄旅嬷袊鴺藴蕰r間，當然也支持 YYYY-MM-DD 等格式，詳情請看文檔；

拿到時間字段回顯

后端返回的是帶時區(qū)的時間格式：
2023-06-27T03:35:10.2828821+00:00
這里案例后端都處理成+00:00 的時區(qū)， 如果沒有處理，可以用moment-timezone 處理顯示；

const formatDateTime = (time) => {
  const date = new Date(time)
  const YY = date.getFullYear() + '-'
  const MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  const hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  const mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return YY + MM + DD + ' ' + hh + mm + ss
}

formatDateTime('2023-06-27T03:35:10.2828821+00:00')
'2023-06-27 11:35:10'

在中國區(qū)電腦驗證：

在美國時區(qū)電腦驗證：

轉(zhuǎn)換為GMT時間后，取對應(yīng)的 年 、月，日。

總結(jié)

認識基本時間表示字符，UTC，GMT等，用 moment-timezone 這個插件來獲取時區(qū)，同時獲取帶時區(qū)的時間字段，以便后續(xù)業(yè)務(wù)處理。文章來源地址http://www.zghlxwxcb.cn/news/detail-515684.html

到了這里，關(guān)于前端Vue3使用Moment Timezone處理不同時區(qū)時間的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！