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

在 JavaScript 中，24 小时格式用作日期时间的默认值。我们还可以使用几种不同的方法以 12 小时 AM/PM 格式显示日期时间。

在本教程中，我们将探索这些方法。12 小时制时间将以小时、分钟和秒 (HH:MM:SS) 格式显示，带有 AM/PM。

目录

1.通过在JavaScript 中创建自己的函数方法，以12小时AM/PM格式显示日期时间

2.Date.prototype.toLocalestring使用JavaScript中的方法以12小时AM/PM格式显示日期时间 

3. Date.prototype.toLocaleTimeString使用JavaScript中的方法以12小时AM/PM格式显示日期时间

4.moment.js使用JavaScript中的方法以12小时AM/PM格式显示日期时间 

---

1.通过在JavaScript 中创建自己的函数方法，以12小时AM/PM格式显示日期时间

 将 JavaScript 日期时间格式化为 12 小时 AM/PM 格式的第一种方法是创建函数。

首先，在这种方法中仅使用本机方法来更改日期时间格式。为了用通俗易懂的方式说明这一点，请使用以下示例：应用模%运算符来查找 12 小时格式的日期时间，并使用条件?运算符来应用 AM 或 PM。

例子： 

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函数，它将一个 JavaScriptdate对象作为参数。调用getHours以获取函数中 24 小时格式的小时数并minutes获取分钟数。

然后，创建ampm变量并将其设置为am或pm取决于小时的值。使用运算符将​​小时数更改为 12 小时格式，%以得到除以 12 的余数。

接下来，使用该toString()函数将分钟转换为字符串，然后使用该padStart函数将字符串填充为 0，如果它只有一位数字。最后，用于strTime将所有内容捆绑在一起。

输出：

2.Date.prototype.toLocalestring使用JavaScript中的方法以12小时AM/PM格式显示日期时间
 

您将使用的第二种方法是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);

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

这与minute. 然后，hour12以 12 小时格式显示小时数。

 输出：

3. Date.prototype.toLocaleTimeString使用JavaScript中的方法以12小时AM/PM格式显示日期时间

您可以使用的第三种方法是Date.prototype.toLocaleTimeString方法。此方法将替换toLocaleString为toLocaleTimeString并为您提供与函数相同的结果toLocaleString。

例子： 

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

输出： 

4.moment.js使用JavaScript中的方法以12小时AM/PM格式显示日期时间
 

您可以使用的第四种方法是moment.js方法。此方法将日期对象格式化为 12 小时 AM/PM 格式。

为此，您将首先调用该format方法。

在哪里：

• a添加上午/下午；
• hh是两位数小时的格式代码；
• mm是两位数分钟的格式代码。

例子：

const str = moment(new Date(2022, 1, 1)).format('hh:mm a')
console.log(str);

输出：