前端Vue3使用Moment Timezone处理不同时区时间

简介: 认识基本时间表示字符,UTC,GMT等,用 moment-timezone 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。

前言

公司是跨国公司,一个表单提交的时间,需要带时区。才可以在不同地方正确显示时间;


一、基本时间概念

UTC , GMT

GMT是前世界标准时,UTC是现世界标准时。

UTC 比 GMT更精准,以原子时计时,适应现代社会的精确计时。

但在不需要精确到秒的情况下,二者可以视为等同。

每年格林尼治天文台会发调时信息,基于UTC。

本地时间

在日常生活中所使用的时间我们通常称之为本地时间。这个时间等于我们所在(或者所使用)时区内的当地时间,它由与世界标准时间(UTC)之间的偏移量来定义。这个偏移量可以表示为 UTC- 或 UTC+,后面接上偏移的小时和分钟数。

为了方便比较,图中黑色背景的是 中国(China)区电脑,白色主题背景的是美国(US)区电脑)

2023-06-27T14:00:00.000Z

这种带有T,Z 的是世界标准时间,其中Z表示默认时区(下面两部电脑显示,用的是当前所在地的时区)
image.png

image.png

二、实际案例

表单填写后传给后端的时间格式(Moment Timezone 方式)

Moment Timezone 中文文档
Moment Timezone 官方英文文档
安装:

pnpm install moment-timezone

使用: 在这里插入代码片
如果只考虑高版本浏览器
Intl.DateTimeFormat().resolvedOptions().timeZone , 可以获取时区name
image.png

下面 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)
  // 首先调用 Intl.DateTimeFormat().resolvedOptions().timeZone
  console.log('timezoneName', timezoneName)
  const resDate = moment.tz(time, timezoneName)?.format()
  return resDate || ''  //
}

案例用的是element plus 的 datetime 组件,所以入参为下面中国标准时间,当然也支持 YYYY-MM-DD 等格式,详情请看文档;
image.png

拿到时间字段回显

后端返回的是带时区的时间格式:
2023-06-27T03:35:10.2828821+00:00
这里案例后端都处理成+00:00 的时区, 如果没有处理,可以用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'

在中国区电脑验证:

image.png

在美国时区电脑验证:

image.png

转换为GMT时间后,取对应的 年 、月,日。

总结

认识基本时间表示字符,UTC,GMT等,用 moment-timezone 这个插件来获取时区,同时获取带时区的时间字段,以便后续业务处理。

相关文章
|
11月前
|
JavaScript 前端开发 编译器
Vue 3 深度解析:现代前端开发的革新引擎
Vue 3 深度解析:现代前端开发的革新引擎
380 6
|
9月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
589 106
|
9月前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架的革新
Vue 3:下一代前端框架的革新
519 103
|
9月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
533 104
|
9月前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
371 102
|
9月前
|
JavaScript 前端开发 算法
Vue 3:下一代前端框架的革命性进化
Vue 3:下一代前端框架的革命性进化
543 103
|
9月前
|
JavaScript 前端开发 编译器
Vue 3:现代前端开发的新范式
Vue 3:现代前端开发的新范式
384 104
|
9月前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
399 104
|
10月前
|
JavaScript 前端开发 API
Vue 3:现代前端开发的革新之作
Vue 3:现代前端开发的革新之作
|
10月前
|
JavaScript 前端开发 安全
Vue 3:现代前端开发的全新体验
Vue 3:现代前端开发的全新体验

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1188
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    527
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    409
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    403
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    516
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    693
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1252
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    281
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1048
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    480