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

Tahseen Tauseef 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中通过创建自己的函数方法以 12 小时 AM/PM 格式显示日期时间
  2. 使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小时 AM/PM 格式显示 DateTime
  3. 使用 JavaScript 中的 Date.prototype.toLocaleTimeString 方法以 12 小时 AM/PM 格式显示日期时间
  4. 使用 JavaScript 中的 moment.js 方法以 12 小时 AM/PM 格式显示日期时间
  5. 结论
在 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 变量并根据小时的值将其设置为 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 日期时间。所有这些方法都同样适用,可以很容易地使用。

相关文章 - JavaScript DateTime