首页 > web前端 > js教程 > 正文

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

王林
发布: 2023-09-08 23:17:02
转载
1655人浏览过

如何在 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

  • 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()方法需要更少的代码行。

以上就是如何在 JavaScript 中将日期转换为另一个时区?的详细内容,更多请关注php中文网其它相关文章!

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

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

下载
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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