选择时区，并全局更新选择时区所对应的时间

最新推荐文章于 2024-03-26 17:42:54 发布
最新推荐文章于 2024-03-26 17:42:54 发布
阅读量1.2k 收藏 8
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38184425/article/details/126500533
版权

实现思路：
使用状态管理（pinia）存储 timeZoneObject 的 key 值 利用 moment().utcOffset(key) 转化时间

// pinia 简单的使用 更多请参考官网
// store 目录结构
// stroe
// 		modules
// 			timeZoneStore.ts	
//		index.ts
// index.ts
import type { App } from 'vue';
import { createPinia } from 'pinia';
const store = createPinia();
export function setupStore(app: App<Element>) {
  app.use(store);
}
export { store };

// main.ts 中引入 pinia
import { setupStore } from '@/store'
// 在 createApp 和 mount 间调用 setupStore(传入createApp生成的app对象)
setupStore(app)

// timeZoneStore.ts
import { defineStore } from 'pinia';
import { store } from '@/store';
import momentTZ from 'moment-timezone';
interface timeZoneModel {
	timeZone: string;
}
export const timeZoneConfig = defineStore({
	id: 'app-timeZone',
	state: ():timeZoneModel => ({
		timeZone: 'Asia/Shanghai',// 默认值 东八区
	}),
	actions: {
		getTimeZoneString(date) {
			// 根据时间戳 和时区key 计算出具体时区 返回具体时区的值：东八区 -08:00
	    	const offsetutc = momentTZ.tz.zone(this.timeZone)?.utcOffset(date as any) as number;
	    	const utc = 0 - offsetutc / 60;
	    	return `${utc < 0 ? '-' : '+'}${Math.abs(utc) < 10 ? '0' + Math.abs(utc) : Math.abs(utc)}:00`;
	    }
	}
})
export function useTimeZoneConfig() {
  return timeZoneConfig(store);
}

格式化时间函数 dateUtil.ts

import moment from 'moment';
import { computed } from 'vue';
import { useTimeZoneConfig } from '@/store/modules/timeZoneStore';
const timeZoneConfig = useTimeZoneConfig ();

const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
const DATE_FORMAT = 'YYYY-MM-DD ';

export function formatToDateTimeFn(
  date: moment.MomentInput = undefined,
  format = DATE_TIME_FORMAT,
): string {
  return moment(date).utcOffset(timeZoneConfig.getTimeZoneString(date)).format(format);
}

export function formatToDateFn(date: moment.MomentInput = undefined, format = DATE_FORMAT): string {
  return moment(date).utcOffset(timeZoneConfig.getTimeZoneString(date)).format(format);
}

export const formatToDateTime = computed(() => (data) => {
  return formatToDateTimeFn(data);
});

export const formatToDate = computed((data) => {
  return formatToDateFn(data);
});

组件直接调用formatToDate / formatToDateTime 传入时间戳就可以显示当前时区所对应的时间

// 只显示年月日
<div>{{ formatToDate(时间戳) }}</div>
// 显示年月日时分秒
<div>{{ formatToDateTime(时间戳) }}</div>

基于 Ant Design Vue 写的下拉组件

// 时区下拉选择框
<div class="time-zone-select mr-3">
  <a-select
    ref="select"
    v-model:value="timeZoneValue"
    style="width: 400px"
    @change="selectTimeZone"
  >
    <a-select-option v-for="item in timeZoneObject" :key="item.key" :value="item.key">{{
      item.text
    }}</a-select-option>
  </a-select>
</div>

import { timeZoneObject } from 'zoneData.js'
import { useTimeZoneConfig } from '@/store/modules/timeZoneStore';
export default defineComponent({
	setup(){	
		const timeZoneConfig = useTimeZoneConfig ();
		const selectTimeZone = (val) => {
		    // 更新 timeZone 值
			timeZoneConfig.$patch((state) => {
	          state.timeZone = val;
	        });
		}
		return {
			timeZoneObject,
			selectTimeZone
		}	
	}
})

// zoneData.js
export const timeZoneObject = [
  { key: 'Pacific/Honolulu', text: '(UTC-10:00) 夏威夷' },
  { key: 'America/Anchorage', text: '(UTC-09:00) 安克雷奇' },
  { key: 'America/Santa_Isabel', text: '(UTC-08:00) 下加利福尼亚州' },
  { key: 'America/Los_Angeles', text: '(UTC-08:00) 太平洋时间（美国和加拿大）' },
  { key: 'America/Chihuahua', text: '(UTC-07:00) 奇瓦瓦,拉巴斯,马萨特兰' },
  { key: 'America/Phoenix', text: '(UTC-07:00) 亚利桑那' },
  { key: 'America/Denver', text: '(UTC-07:00) 山地时间（美国和加拿大）' },
  { key: 'America/Guatemala', text: '(UTC-06:00) 中美洲' },
  { key: 'America/Chicago', text: '(UTC-06:00) 中部时间（美国和加拿大）' },
  { key: 'America/Regina', text: '(UTC-06:00) 萨斯喀彻温' },
  { key: 'America/Mexico_City', text: '(UTC-06:00) 瓜达拉哈拉,墨西哥城,蒙特雷' },
  { key: 'America/Bogota', text: '(UTC-05:00) 波哥大,利马,基多' },
  { key: 'America/Indiana/Indianapolis', text: '(UTC-05:00) 印地安那州（东部）' },
  { key: 'America/New_York', text: '(UTC-05:00) 东部时间（美国和加拿大）' },
  { key: 'America/Caracas', text: '(UTC-04:30) 加拉加斯' },
  { key: 'America/Halifax', text: '(UTC-04:00) 大西洋时间（加拿大）' },
  { key: 'America/Asuncion', text: '(UTC-04:00) 亚松森' },
  { key: 'America/La_Paz', text: '(UTC-04:00) 乔治敦,拉巴斯,马瑙斯,圣胡安' },
  { key: 'America/Cuiaba', text: '(UTC-04:00) 库亚巴' },
  { key: 'America/Santiago', text: '(UTC-04:00) 圣地亚哥' },
  { key: 'America/St_Johns', text: '(UTC-03:30) 纽芬兰' },
  { key: 'America/Sao_Paulo', text: '(UTC-03:00) 巴西利亚' },
  { key: 'America/Godthab', text: '(UTC-03:00) 格陵兰' },
  { key: 'America/Cayenne', text: '(UTC-03:00) 卡宴,福塔雷萨' },
  { key: 'America/Argentina/Buenos_Aires', text: '(UTC-03:00) 布宜诺斯艾利斯' },
  { key: 'America/Montevideo', text: '(UTC-03:00) 蒙得维的亚' },
  { key: 'Etc/GMT+2', text: '(UTC-02:00) 协调世界时-2' },
  { key: 'Atlantic/Cape_Verde', text: '(UTC-01:00) 佛得角群岛' },
  { key: 'Atlantic/Azores', text: '(UTC-01:00) 亚速尔群岛' },
  { key: 'Africa/Casablanca', text: '(UTC+00:00) 卡萨布兰卡' },
  { key: 'Atlantic/Reykjavik', text: '(UTC+00:00) 蒙罗维亚,雷克雅未克' },
  { key: 'Europe/London', text: '(UTC+00:00) 都柏林,爱丁堡,里斯本,伦敦' },
  { key: 'Etc/GMT', text: '(UTC+00:00) 协调世界时' },
  { key: 'Europe/Berlin', text: '(UTC+01:00) 阿姆斯特丹,柏林,伯尔尼,罗马,斯德哥尔摩,维也纳' },
  { key: 'Europe/Paris', text: '(UTC+01:00) 布鲁塞尔,哥本哈根,马德里,巴黎' },
  { key: 'Africa/Lagos', text: '(UTC+01:00) 中非西部' },
  {
    key: 'Europe/Budapest',
    text: '(UTC+01:00) 贝尔格莱德,布拉迪斯拉发,布达佩斯,卢布尔雅那,布拉格',
  },
  { key: 'Europe/Warsaw', text: '(UTC+01:00) 萨拉热窝,斯科普里,华沙,萨格勒布' },
  { key: 'Africa/Windhoek', text: '(UTC+01:00) 温得和克' },
  { key: 'Europe/Istanbul', text: '(UTC+02:00) 雅典,布加勒斯特,伊斯坦布尔' },
  { key: 'Europe/Kiev', text: '(UTC+02:00) 赫尔辛基,基辅,里加,索非亚,塔林,维尔纽斯' },
  { key: 'Africa/Cairo', text: '(UTC+02:00) 开罗' },
  { key: 'Asia/Damascus', text: '(UTC+02:00) 大马士革' },
  { key: 'Asia/Amman', text: '(UTC+02:00) 安曼' },
  { key: 'Africa/Johannesburg', text: '(UTC+02:00) 哈拉雷,比勒陀利亚' },
  { key: 'Asia/Jerusalem', text: '(UTC+02:00) 耶路撒冷' },
  { key: 'Asia/Beirut', text: '(UTC+02:00) 贝鲁特' },
  { key: 'Asia/Baghdad', text: '(UTC+03:00) 巴格达' },
  { key: 'Europe/Minsk', text: '(UTC+03:00) 明斯克' },
  { key: 'Asia/Riyadh', text: '(UTC+03:00) 利雅得' },
  { key: 'Africa/Nairobi', text: '(UTC+03:00) 内罗毕' },
  { key: 'Asia/Tehran', text: '(UTC+03:30) 德黑兰' },
  { key: 'Europe/Moscow', text: '(UTC+04:00) 莫斯科,圣彼得堡,伏尔加格勒' },
  { key: 'Asia/Tbilisi', text: '(UTC+04:00) 第比利斯' },
  { key: 'Asia/Yerevan', text: '(UTC+04:00) 埃里温' },
  { key: 'Asia/Dubai', text: '(UTC+04:00) 阿布扎比,马斯喀特' },
  { key: 'Asia/Baku', text: '(UTC+04:00) 巴库' },
  { key: 'Indian/Mauritius', text: '(UTC+04:00) 路易港' },
  { key: 'Asia/Kabul', text: '(UTC+04:30) 喀布尔' },
  { key: 'Asia/Tashkent', text: '(UTC+05:00) 塔什干' },
  { key: 'Asia/Karachi', text: '(UTC+05:00) 伊斯兰堡,卡拉奇' },
  { key: 'Asia/Colombo', text: '(UTC+05:30) 斯里加亚渥登普拉' },
  { key: 'Asia/Kolkata', text: '(UTC+05:30) 钦奈,加尔各答,孟买,新德里' },
  { key: 'Asia/Kathmandu', text: '(UTC+05:45) 加德满都' },
  { key: 'Asia/Almaty', text: '(UTC+06:00) 阿斯塔纳' },
  { key: 'Asia/Dhaka', text: '(UTC+06:00) 达卡' },
  { key: 'Asia/Yekaterinburg', text: '(UTC+06:00) 叶卡捷琳堡' },
  { key: 'Asia/Yangon', text: '(UTC+06:30) 仰光' },
  { key: 'Asia/Bangkok', text: '(UTC+07:00) 曼谷,河内,雅加达' },
  { key: 'Asia/Novosibirsk', text: '(UTC+07:00) 新西伯利亚' },
  { key: 'Asia/Krasnoyarsk', text: '(UTC+08:00) 克拉斯诺亚尔斯克' },
  { key: 'Asia/Ulaanbaatar', text: '(UTC+08:00) 乌兰巴托' },
  { key: 'Asia/Shanghai', text: '(UTC+08:00) 北京,重庆,香港,乌鲁木齐' },
  { key: 'Australia/Perth', text: '(UTC+08:00) 佩思' },
  { key: 'Asia/Singapore', text: '(UTC+08:00) 吉隆坡,新加坡' },
  { key: 'Asia/Taipei', text: '(UTC+08:00) 台北' },
  { key: 'Asia/Irkutsk', text: '(UTC+09:00) 伊尔库茨克' },
  { key: 'Asia/Seoul', text: '(UTC+09:00) 首尔' },
  { key: 'Asia/Tokyo', text: '(UTC+09:00) 大阪,札幌,东京' },
  { key: 'Australia/Darwin', text: '(UTC+09:30) 达尔文' },
  { key: 'Australia/Adelaide', text: '(UTC+09:30) 阿德莱德' },
  { key: 'Australia/Hobart', text: '(UTC+10:00) 霍巴特' },
  { key: 'Asia/Yakutsk', text: '(UTC+10:00) 雅库茨克' },
  { key: 'Australia/Brisbane', text: '(UTC+10:00) 布里斯班' },
  { key: 'Pacific/Port_Moresby', text: '(UTC+10:00) 关岛,莫尔兹比港' },
  { key: 'Australia/Sydney', text: '(UTC+10:00) 堪培拉,墨尔本,悉尼' },
  { key: 'Asia/Vladivostok', text: '(UTC+11:00) 符拉迪沃斯托克' },
  { key: 'Pacific/Guadalcanal', text: '(UTC+11:00) 所罗门群岛,新喀里多尼亚' },
  { key: 'Etc/GMT-12', text: '(UTC+12:00) 协调世界时+12' },
  { key: 'Pacific/Fiji', text: '(UTC+12:00) 斐济,马绍尔群岛' },
  { key: 'Asia/Magadan', text: '(UTC+12:00) 马加丹' },
  { key: 'Pacific/Auckland', text: '(UTC+12:00) 奥克兰,惠灵顿' },
  { key: 'Pacific/Tongatapu', text: '(UTC+13:00) 努库阿洛法' },
  { key: 'Pacific/Apia', text: '(UTC+13:00) 萨摩亚群岛' },
];
joker云
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
时区选择器：使用世界地图选择时区
02-04
时区选择器 时区选择器是用于从WorldMap中选择并获取所选区域（国家）的时区值的插件。 现场演示： : 相依性 时区 jQuery的 select2（可选） 安装 使用软件包使用npm npm install --save timezone-picker 要么 使用CDN使用软件包 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/timezone-picker.min.js " > </ script > 在HTML部分中包含以下代码行。 < link href =" [yourp
vue中本地时间转换其它时区的时间(js)
szjSmiling的博客
08-30 7224
&lt;p&gt;距离印度的中秋8月15还剩&lt;/p&gt; &lt;div class="count-down"&gt; &lt;span class="child child0" :style="timeBg"&gt;{{time.day1}}&lt;/span&gt; &lt;span class="child child00&qu
Vue3 日期时间时区格式化
最新发布
HuaiCheng9067的博客
03-26 146
日期时间、时区处理
设置时区和时间
大漠知秋的加油站
12-26 642
  查看当前时间和时区 # 查看时间信息，当前时区带有夏令时信息 $ timedatectl Local time: 四 2019-12-26 05:52:36 EST Universal time: 四 2019-12-26 10:52:36 UTC RTC time: 四 2019-12-26 10:52:36 Time zone: America...
tzselect - 选择一个时区
weixin_30242907的博客
06-28 162
总览 tzselect 描述 tzselect 程序向用户询问当前位置的信息，把时区描述作为结果输出到标准输出。此结果适合作为环境变量 TZ 的值。 所有与用户的交互是通过标准输入和标准错误输出完成的。 环境变量 AWK一个 Posix 兼容的 awk 程序的名字(缺省: awk).TZDIR包含时区数据文件的目录的名字 (缺省: /usr/local/etc/zoneinfo). ...
JS-时区选择-获取当前时区
热门推荐
wang704987562的博客
12-29 1万+
一个时区选择插件的使用，以及获取当前时区的例子。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery/3.3.
vue js 获取不同时区的当前时间，在特定时区格式化时间戳
郝峰vip的博客
11-13 2939
前言 在做跨境电商项目的时候，遇到一个设置广告营销的跨时区的时间不匹配导致广告不能同步的问题，所以就想着如何解决。 相看到这个标题就会想到用时间戳解决这个问题，我一开始也是用的时间戳直接格式化的时间，（时间戳在全时间每个时区都是相同的），但是这样会有一个问题，就是你的服务器在北京，这样你的项目在美国中部标准时区（西六区）访问转时间戳出来的时间还是北京时间（东八区） 出现这个问题的原因是我用得moment.js换的时间，所以导致代码在哪里就转的那个时间，后来就采用了指定时区的办法，就得已完美解决。 解决
java转换时区时间过程详解
08-25
主要介绍了java转换时区时间过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
国际时间、时区查询源代码
03-18
本国际时间，时区查询源码，简单易用，提供全球超过200个国家当地时间，时区查询，还提供北京时间对照，星期等人性化的应用！ 支持IE浏览器，360浏览器，搜狗浏览器，火狐浏览器，谷歌chrome浏览器等主流浏览器，...
微信小程序学习用demo：多时区选择
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
Android 时区自动更新
08-02
Android 时区自动更新
一个非常有用和动态的 React 时区选择器
06-08
:globe_with_meridians: :watch: react-timezone-select 另一个React时区选择组件，我知道..但是这个有一些关键的好处！ 在四处寻找一个好的选择时，我很难找到一个时区选择组件：1) 使用夏令时 (DST) 自动调整选项 2) 在技术上只有 24 ( ish) 是必要的 更新：v0.7+ 现在使用 spacetime 而不是 moment.js 构建，将包大小减少了约 66%！ 更新：v0.10+ 现在使用 Typescript 构建！ 演示：ndom91.github.io/react-timezone-select 这个演示也可以在 ./examples 目录中找到。 安装完所有内容后，只需运行 npm start 即可启动 webpack 开发服务器，您可以在 localhost:3001 找到演示。 我们还在 Codesandbox 上提供了一些使用此组件与日期时间库 spacetime 以及 moment 的示例，展示了如何在实际应用程序中使用此组件。 :building_construction: 安装 npm instal
时区选择插件timezone-picker
06-01
是一款带世界地图的jquery时区选择插件。该jquery时区选择器采用响应式设计，使你可以快速的在一张基于SVG的世界地图上选择不同的时区。
详解Django 时间与时区设置问题
09-19
主要介绍了Django 时间与时区设置问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
在Vue中如何挂载全局进行时间格式，格式出来我们想要的呢？
执着
04-21 1159
在Vue中如何挂载全局进行时间格式，格式出来我们想要的呢？我们可以使用moment挂载全局的方式来进行时间格式
基于Vue3手写选课组件（含时区切换，拖拽选择）
小龙哒的博客
03-07 331
基于vue3+vite 无关联别的ui框架，组件化。
springboot + vue 时区问题
学长的猫的博客
04-12 1981
1. java 环境是东2区 2.前端界面vue+ el 如果 前台选择时间 2022年4月12日11:03:16 ， el会自动出库，接口传的数据是： 2022年4月12日03:03:16 （UTC时间 ） java 后台接收到的时间(LocalDateTime)是 2022年4月12日05:04:16 （东2 区） ...
vue获取不同时区的时间
m0_59079084的博客
08-22 947
使用vue获取悉尼，纽约，东京，北京的年月日，星期，时分秒时间，格式为YYYY-mm-dd WWW HH:MM:SS
前端Vue3使用Moment Timezone处理不同时区时间
Bruce__taotao的博客
06-27 3014
前端使用moent timezone 处理不同时区的时间
Android 选择时区功能实现
06-08
在 Android 中，可以使用系统提供的 `TimeZone` 类来实现时区功能。以下是一个简单的示例代码： ```java // 获取系统默认时区 TimeZone defaultTimeZone = TimeZone.getDefault(); // 获取所有可用的时区列表 String[] availableTimeZones = TimeZone.getAvailableIDs(); // 设置时区 TimeZone customTimeZone = TimeZone.getTimeZone("Asia/Shanghai"); TimeZone.setDefault(customTimeZone); ``` 在上面的示例代码中，首先使用 `getDefault()` 方法获取系统默认时区，然后使用 `getAvailableIDs()` 方法获取所有可用的时区列表。如果需要设置自定义时区，可以使用 `getTimeZone()` 方法并传入时区 ID 来获取对应的 `TimeZone` 对象，最后使用 `setDefault()` 方法设置时区即可。 另外，如果需要将日期和时间转换为指定的时区，可以使用 `SimpleDateFormat` 类并设置时区，例如： ```java // 创建 SimpleDateFormat 对象并设置时区 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); sdf.setTimeZone(customTimeZone); // 将日期和时间转换为指定时区的字符串 String formattedDate = sdf.format(new Date()); ``` 在上面的示例代码中，创建了一个 `SimpleDateFormat` 对象并设置了时区，然后使用 `format()` 方法将日期和时间转换为指定时区的字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值