0

0

如何在 JavaScript 中将日期转换为另一个时区?

王林

王林

发布时间:2023-09-08 23:17:02

|

1756人浏览过

|

来源于tutorialspoint

转载

如何在 javascript 中将日期转换为另一个时区?

JavaScript has a new Date() constructor which is used to create a date object to get the current date and time. This date object uses the UTC timezone or the client browser's timezone, i.e. if you are in India and use the new Date() constructor to get the date and time, you will get your local time. But sometimes, we may need to get the timezone of another country, which we can't do directly. These can be done using the toLocaleString() method or the format() method. By the end of the article, you will be able to get the date of any other timezone in JavaScript.

The two methods that we will use in this article to convert a date to another time zone are as follows −

使用 toLocaleString() 方法

toLocaleString() 方法可以使用日期对象调用。该方法具有根据传入的参数将数据从一个时区转换为另一个时区的能力。它接受两个参数,第一个参数是“locale”,它是应该使用的格式约定的语言,对于英语来说是“en-US”,第二个参数是“options”,对于我们来说是{timeZone:“countryName”},其中countryName是我们想要更改时区的国家的名称。

以下是使用toLocaleString()方法在JavaScript中将日期转换为另一个时区的逐步过程。

  • 使用Date构造函数创建一个日期对象

  • Use the date object with toLocaleString() method and pass the first argument as 'en-US' for English language date and time formatting, and the second argument {timeZone: "America/New_York"} for getting the timezone of New York

    Pliny
    Pliny

    创建、分享和重新组合AI应用程序

    下载
  • Store the value return from this method into a variable, that variable is our required timezone.

Example

在这个例子中,我们使用JavaScript的toLocaleString()方法将一个日期转换为另一个时区。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Converting date to another timezone in JavaScript</title>
</head>
<body>
   <h3>Convert date to America/New_York Time Zone using toLocaleString() Method</h3>
   <p id="input">Local Time: </p>
   <p id="output">America/New_York Time Zone: </p>
   <script>
      // date objec
      let date = new Date();
      document.getElementById("input").innerText += date ;
      
      // convert date to another timezone
      let output = date.toLocaleString("en-US", {
         timeZone: "America/New_York"
      });
      
      // display the result
      document.getElementById("output").innerText += output;
   </script>
</body>
</html>

Using Format() Method

We can use the format() method with the "Intl.DateTimeFormat" object and use the date object passed as an argument to the format() method to convert the timezone to a timezone passed while creating the "Intl.DateTimeFormat" object. It sounds complicated but it is very simple if you look at the example below.

Here is the step-wise procedure to convert a date to another timezone in JavaScript using format() Method.

  • Create a date object using the Date constructor.

  • 在创建“Intl.DateTimeFormat”对象时,将第一个参数设置为'en-US'以进行英语语言的日期和时间格式化,第二个参数{timeZone: "America/New_York"}用于获取纽约的时区。

  • Use the format() method with this object and pass the date object as an argument and store it in a variable, that variable is our required timezone.

Example

In this example, we are converting a date to another timezone in JavaScript using the format() Method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Convert date to America/New_York timezone in JavaScript</title>
</head>
<body>
   <h3>Convert date to America/New_York timezone using format() Method</h3>
   <p id="input">Local Time: </p>
   <p id="output">America/New_York Time Zone: </p>
   <script>
      // date objec
      let date = new Date();
      document.getElementById("input").innerText += date ;
      
      // create a new date object
      let newObj = Intl.DateTimeFormat('en-US', {
         timeZone: "America/New_York"
      })
      
      // convert date to another timezone
      let newDate = newObj.format(date);
      
      // display the result
      document.getElementById("output").innerHTML += newDate;
   </script>
</body>
</html>

Summary

让我们总结一下在本教程中学到的内容。我们看到我们有两种方法可以将日期转换为另一个时区,第一种是使用日期对象的toLocaleString()方法,第二种是使用"Intl.DateTimeFormat"对象的format()方法。这两种方法有不同的用例,你可以根据自己的需要选择。我们推荐使用toLocaleString()方法,它易于使用,而且比使用"Intl.DateTimeFormat"对象的format()方法需要更少的代码行。

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

844

2023.08.22

while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

104

2023.09.25

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

866

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

458

2024.06.27

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

3

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

21

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

108

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

51

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

89

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号