将 JavaScript 日期初始化为特定时区
本篇文章介绍如何将 JavaScript 日期初始化为特定时区。
JavaScript 的日期对象在内部使用 UTC,但根据操作计算机的本地时间显示输出。日期对象没有任何时区概念。没有声明字符串对象。它只是对自 1970-01-01 00:00:00 UTC
以来经过的毫秒数的度量。在输出时间时,它会自动考虑计算机的本地时区并应用于内部表示。它不适用于不同的时区。因此,我们需要借助函数和外部库来执行此类操作。
使用 Intl.DateTimeFormat
和 format()
方法将 JavaScript 日期初始化为特定时区
JavaScript Intl 对象是 JavaScript 国际化 API 的辅助工具。它为我们提供了许多用于转换日期/时间、字符串和数字的函数。Intl 对象使用 DateTimeFormat
来格式化日期时间字符串。它有一个 format
方法,它使用作为格式化程序参数提供的语言环境和选项获取日期并将其转换为不同的时区。此方法会将日期格式化为所需的时区并将其转换为字符串。
format()
函数采用的参数是日期。我们需要以下参数来形成 Intl.DateTimeFormat
对象:
-
locales
:它是一个包含语言和语言环境标签的字符串数组。通常,它是一个可选参数,但对于我们的目的来说是必需的。要更改时区,我们只需指定 BCP 语言代码和所需的时区。 -
options
:它是一个对象,用于指定执行比较的属性。它也是一个可选参数,可用于指定样式和显示单位。一些属性是second
、minute
、hour
、day
,、month
和year
等。
例如:我们可以传递一个选项对象,如 { hour: 'numeric', hour12: false, minute: 'numeric', timeZoneName: 'short'}
function changeTimezone() {
let date = new Date(Date.UTC(2021, 5, 28, 3, 0, 0));
console.log('Date in India: ' + date);
let formatter = new Intl.DateTimeFormat('en-US', { timeZone: "America/Denver" });
let usDate = formatter.format(date);
console.log('Date in USA: ' + usDate);
}
输出:
Date in India: Mon Jun 28 2021 08:30:00 GMT+0530 (India Standard Time)
VM1504:7 Date in USA: 6/27/2021
在上面的函数中,我们首先使用 Date()
构造函数创建一个 Date 对象。然后我们使用 Intl.DateTimeFormat
创建一个格式化程序,指定区域设置,即 BCP 语言标签
和我们要转换到的 timeZone
。然后我们使用此格式化程序将日期转换为所需的时区。
使用 toLocaleString()
方法将 JavaScript 日期初始化为特定时区
toLocaleString()
方法最常用于更改时区,因为它更易于使用并且可以直接在 Date 上调用。它的工作方式与 Intl.DateTimeFormat
相同。它还接受语言环境字符串和选项作为参数,并返回一个日期根据它们格式化的字符串。这种方法的优点是不像上面的方法是根据国家的时区转换时间并在字符串中返回。
function changeTimezone() {
let date = new Date(Date.UTC(2021, 5, 28, 3, 0, 0));
console.log('Date in India: ' + date);
let usDate = date.toLocaleString("en-US", {timeZone: "America/New_York"});
console.log('Date in USA: ' + usDate);
}
输出:
Date in India: Mon Jun 28 2021 08:30:00 GMT+0530 (India Standard Time)
Date in USA: 6/27/2021, 11:00:00 PM
在上面的函数中,我们首先使用 Date()
构造函数创建一个 Date 对象。我们在指定 language tag
和 timeZone
的日期上调用 toLocaleString
函数,并将日期/时间转换为不同的时区。
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。