在 JavaScript 中以 12 小时 AM/PM 格式显示日期时间
在 JavaScript 中,24 小时格式用作日期时间的默认值。我们还可以使用几种不同的方法以 12 小时 AM/PM 格式显示日期时间。
在本篇文章中,我们将探索这些方法。12 小时制时间将以小时、分钟和秒 (HH:MM:SS) 格式显示,带有 AM/PM。
在 JavaScript 中通过创建自己的函数方法以 12 小时 AM/PM 格式显示日期时间
将 JavaScript 日期时间格式化为 12 小时 AM/PM 格式的第一种方法是创建函数。
首先,在这种方法中仅使用本机方法来更改日期时间格式。为了以通俗易懂的方式说明这一点,请使用以下示例:应用模%
运算符来查找 12 小时格式的日期时间并使用条件 ?
运营商申请上午或下午。
例子:
const formatAMPM = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
let ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes.toString().padStart(2, '0');
let strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
console.log(formatAMPM(new Date(2022, 1, 1)));
你有 formatAMPM
函数,它将 JavaScript date
对象作为参数。调用 getHours
获取函数中 24 小时格式的小时数,调用 minutes
获取分钟数。
然后,创建 ampm
变量并根据小时的值将其设置为 am
或 pm
。使用 %
运算符将小时更改为 12 小时格式,以获得除以 12 的余数。
接下来,使用 toString()
函数将分钟转换为字符串,然后使用 padStart
函数将字符串填充为 0,如果它只有一个数字。最后,使用 strTime
将所有内容联系在一起。
输出:
使用 JavaScript 中的 Date.prototype.toLocaleString
方法以 12 小时 AM/PM 格式显示 DateTime
你将使用的第二种方法是 Date.prototype.toLocaleString
方法。此方法使用户更容易将日期时间格式化为 AM/PM 格式。
在此方法中,你将利用称为 toLocaleString
函数的内置函数来更改给定日期的格式。toLocaleString():
将返回日期对象的字符串表示形式。
Locale
和 options,
这两个参数允许自定义方法的行为。
例子:
const str = new Date(2022, 1, 1).toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
})
console.log(str);
使用 locale
、object
和一些选项在你的日期对象上调用 toLocaleString
函数。小时
设置为数字以数字格式显示小时。
这与分钟
相同。然后,hour12
以 12 小时格式显示小时数。
输出:
使用 JavaScript 中的 Date.prototype.toLocaleTimeString
方法以 12 小时 AM/PM 格式显示日期时间
你可以使用的第三种方法是 Date.prototype.toLocaleTimeString
方法。此方法将用 toLocaleTimeString
替换 toLocaleString
并将为你提供与 toLocaleString
函数相同的结果。
例子:
const str = new Date(2022, 1, 1).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
})
console.log(str);
输出:
使用 JavaScript 中的 moment.js
方法以 12 小时 AM/PM 格式显示日期时间
你可以使用的第四种方法是 moment.js
方法。此方法将日期对象格式化为 12 小时 AM/PM 格式。
为此,你将首先调用 format
方法。
其中,
-
a
添加 AM/PM -
hh
是两位数小时的格式代码; -
mm
是两位数分钟的格式代码。
例子:
const str = moment(new Date(2022, 1, 1)).format('hh:mm a')
console.log(str);
输出:
结论
在本文中,你学习了各种方法,例如创建我们的函数 Date.prototype.toLocaleString
、Date.prototype.toLocaleTimeString
和 moment.js
,它们可以以 12 小时 AM/PM 格式显示 JavaScript 日期时间。所有这些方法都同样适用,可以很容易地使用。
相关文章
在 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 中下载文件并显示一个示例。