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

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 中，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 日期时间。所有这些方法都同样适用，可以很容易地使用。