迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中以 12 小时 AM/PM 格式显示日期时间

作者:迹忆客 最近更新:2023/03/24 浏览次数:

在 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 变量并根据小时的值将其设置为 ampm。使用 % 运算符将小时更改为 12 小时格式,以获得除以 12 的余数。

接下来,使用 toString() 函数将分钟转换为字符串,然后使用 padStart 函数将字符串填充为 0,如果它只有一个数字。最后,使用 strTime 将所有内容联系在一起。

输出:

12 小时 AM/PM 中的 DateTime 创建自己的函数输出


使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小时 AM/PM 格式显示 DateTime

你将使用的第二种方法是 Date.prototype.toLocaleString 方法。此方法使用户更容易将日期时间格式化为 AM/PM 格式。

在此方法中,你将利用称为 toLocaleString 函数的内置函数来更改给定日期的格式。toLocaleString(): 将返回日期对象的字符串表示形式。

Localeoptions, 这两个参数允许自定义方法的行为。

例子:

const str = new Date(2022, 1, 1).toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
console.log(str);

使用 localeobject 和一些选项在你的日期对象上调用 toLocaleString 函数。小时 设置为数字以数字格式显示小时。

这与分钟相同。然后,hour12 以 12 小时格式显示小时数。

输出:

使用 Date.prototype.toLocaleString 的 12 小时 AM/PM 中的 DateTime


使用 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);

输出:

使用 Date.prototype.toLocaleTimeString 的 12 小时 AM/PM 中的 DateTime


使用 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);

输出:

使用 moment.js 的 12 小时 AM/PM 日期时间


结论

在本文中,你学习了各种方法,例如创建我们的函数 Date.prototype.toLocaleStringDate.prototype.toLocaleTimeStringmoment.js,它们可以以 12 小时 AM/PM 格式显示 JavaScript 日期时间。所有这些方法都同样适用,可以很容易地使用。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便