迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 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 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

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

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便