Vue使用moment处理不同时区的时间的操作方法

# npm 安装
npm install moment moment-timezone --save

# 或 yarn 安装
yarn add moment moment-timezone

<template>
  <div>
    <p>UTC 时间：{{ utcTime }}</p>
    <p>转换为北京时间（东8区）：{{ beijingTime }}</p>
    <p>转换为纽约时间：{{ newYorkTime }}</p>
    <p>本地时区时间：{{ localTime }}</p>
  </div>
</template>

<script>
import moment from 'moment'
import 'moment-timezone' // 引入时区扩展

export default {
  name: 'TimezoneDemo',
  computed: {
    // 模拟后端返回的 UTC 时间（常见场景）
    utcTime() {
      const utcDate = '2026-03-01T08:00:00Z' // 带 Z 表示 UTC 时间
      return moment(utcDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // UTC 转北京时间（Asia/Shanghai 是北京对应的时区标识）
    beijingTime() {
      const utcDate = '2026-03-01T08:00:00Z'
      // tz('Asia/Shanghai') 指定转换为北京时间
      return moment.utc(utcDate).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss')
    },
    // UTC 转纽约时间（America/New_York 是纽约时区标识）
    newYorkTime() {
      const utcDate = '2026-03-01T08:00:00Z'
      return moment.utc(utcDate).tz('America/New_York').format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取当前本地时区的时间
    localTime() {
      // moment.tz.guess() 自动识别本地时区
      return moment().tz(moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import moment from 'moment'
import 'moment-timezone' // 引入时区扩展

// 全局挂载
Vue.prototype.$moment = moment
// 可选：配置默认时区（比如默认北京时区）
moment.tz.setDefault('Asia/Shanghai')

new Vue({
  render: h => h(App)
}).$mount('#app')

<template>
  <div>
    <p>默认北京时区时间：{{ $moment().format('YYYY-MM-DD HH:mm:ss') }}</p>
    <p>手动切换伦敦时区：{{ $moment().tz('Europe/London').format('YYYY-MM-DD HH:mm:ss') }}</p>
  </div>
</template>

// 1. 获取所有可用的时区列表（用于下拉选择等场景）
const timezones = moment.tz.names()
console.log(timezones) // 输出 ["Asia/Shanghai", "America/New_York", "Europe/London", ...]

// 2. 根据时区偏移量转换（比如东8区=+08:00，西5区=-05:00）
const utcDate = '2026-03-01T08:00:00Z'
// 东8区：UTC+8
const east8Time = moment.utc(utcDate).utcOffset(8).format('YYYY-MM-DD HH:mm:ss')
// 西5区：UTC-5
const west5Time = moment.utc(utcDate).utcOffset(-5).format('YYYY-MM-DD HH:mm:ss')

// 3. 将本地时间转换为指定时区时间
const localDate = '2026-03-01 16:00:00' // 本地时间
const toLondonTime = moment(localDate).tz('Europe/London').format('YYYY-MM-DD HH:mm:ss')

// 4. 判断某个时区的当前时间
const nowInTokyo = moment().tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm:ss')