你如何在JavaScript中以12小时制(AM/PM)显示日期和时间？
33个回答
793
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
console.log(formatAMPM(new Date));- bbrame
15
4你声明了"hours"变量两次，但是无意中使"strTime"成为全局变量。这不是非常优雅的做法，但似乎是使用本地方法的正确技术。 - Jon z
3如果分钟数小于10（比如16:04），那么该语句会添加字符串"0"，以便格式化输出为"4:04 PM"而不是"4:4 PM"。需要注意的是，这个过程中，分钟数从数字变成了字符串。 - Caleb Bell
8我更喜欢这个写法：
minutes = ('0'+minutes).slice(-2);，而不是这个写法：minutes = minutes < 10 ? '0'+minutes : minutes;。 - Vignesh1@Vignesh的解决方案更好，因为如果您使用建议的方法，则21:00:00将变为9:000。Vignesh的解决方案可以正确地显示分钟为:00。如果您使用上述解决方案，则还需要考虑00的情况。(minutes>0 && minutes < 10) ? '0'+minutes : minutes; - Robbie Smith
15这太疯狂了，有人建议从零开始构建一个轮子，而我们已经有 JS 内置的东西可以做到这一点，这个答案获得了很多投票，并被显示为最佳答案。我不赞成否定它，个人也不喜欢这种态度，如果你没有先检查是否有好的内置解决方案，那么我可以自己实现它，好的解决方案应该经过充分测试、维护和推荐，只需要看一下
toLocaleString，它可以以多种方式格式化 JS DateTime，包括你的情况。并且从古代时期起，所有浏览器都支持它 https://caniuse.com/?search=toLocaleString - Igor Lutsyk显示剩余10条评论
430
如果你只想显示小时，则..
var time = new Date();
console.log(
time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
); 输出：上午7点
如果你想同时显示分钟...
var time = new Date();
console.log(
time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
);输出：上午7:23
- Abhay Kumar
9
1小时、分钟和上午/下午怎么办？ - reutsey
2@HumbleDolt 你可能把
'numeric' 和 '2-digit' 搞混了。 - hon2a"...在几乎所有浏览器中得到支持（自IE6+，Firefox 2+，Chrome 1+等）" - Steven Ventimiglia
4这是最好的答案，但如何更改AM / PM的大写形式？ - Omar
显示剩余4条评论
49
这里有一种使用正则表达式的方法：
console.log(new Date('7/10/2013 20:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))
console.log(new Date('7/10/2013 01:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"))这将创建3个匹配组：
([\d]+:[\d]{2})- 小时:分钟(:[\d]{2})- 秒钟(.*)- 空格和句点（句点是AM/PM的官方名称）
然后显示第1个和第3个组。
警告：toLocaleTimeString()可能会根据区域/位置表现不同。
- Steve Tauber
5
4人们没有充分利用正则表达式。在不添加上述jQuery / Microsoft Ajax库建议的情况下，这对我起了作用。 - uadrive
如果小时数是个位数，正则表达式应该怎么写才能在小时数前面加上一个零呢？比如你的第一个例子是晚上8:12，那么应该显示为08:12 PM。 - RADXack
1@404 是一样的，
([\d]+:[\d]{2}) 是我们感兴趣的部分。使用冒号作为分隔符，我们可以看到第一部分是 [\d]+。加号意味着一个或多个。因此它正在寻找一个或多个数字（包括零）。如果您必须保证有一个零存在，那么它将是 (0[\d]:[\d]{2})。现在这里的意思是，查找0加上另外一个数字，然后冒号，然后是其余部分。 - Steve Tauber1console.log(new Date().toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3")); 获取当前时间 - mujaffars
1在澳大利亚无法正常工作。
new Date('7/10/2013 20:12:34').toLocaleTimeString() 返回 20:12:34，而正则表达式只返回了 20:12。@abhay-kumar 的答案 time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }) 起作用了。 - Craigo48
如果您不需要打印上午/下午，我发现以下方法简洁明了：
var now = new Date();
var hours = now.getHours() % 12 || 12; // 12h instead of 24h, with 12 instead of 0.
这是基于 @bbrame 的回答。
- rattray
3
4@koolinc 表示半夜 12 点时会显示 12。我不确定其他期望的行为是什么。 - rattray
1我纠正一下。在我的国家我们使用24小时制，所以我对12小时制不是很熟悉。的确，午夜是12:00am。 - KooiInc
如果只需要12小时制的小时数，那么这个方法非常完美。 - Md. A. Apu
35
在现代浏览器中，使用Intl.DateTimeFormat，并使用以下选项强制为12小时格式：
let now = new Date();
new Intl.DateTimeFormat('default',
{
hour12: true,
hour: 'numeric',
minute: 'numeric'
}).format(now);
// 6:30 AM
使用 default 将遵循浏览器的默认区域设置（如果添加了更多选项），但仍将输出12小时格式。
- mtm
2
要使用它，请将新字符串分配给变量，例如：
let result = new Intl.DateTi....
alert(result); - Scot Nery
可以这样做：
const time = new Date().toLocaleString([], { hour: 'numeric', minute: 'numeric' }); //"上午6:30" - Dem Pilafian33
据我所知，不使用扩展和复杂代码实现这一点的最佳方法是这样的：
date.toLocaleString([], { hour12: true});
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date and time as a string.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="fullDateTime()">Try it2</button>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function myFunction() {
var d = new Date();
var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit' });
document.getElementById("demo").innerHTML = n;
}
function fullDateTime() {
var d = new Date();
var n = d.toLocaleString([], { hour12: true});
document.getElementById("demo2").innerHTML = n;
}
</script>
</body>
</html>我在查看这个问题时发现了它。
- Edwin Mendez
2
这是最简单的答案。投票赞成，因为这是一个JavaScript本地解决方案。谢谢 - Raul A.
这是一个不错的本地解决方案。 - Qumber
22
使用 Moment.js 完成此操作
在 JavaScript 中使用以下代码，使用 moment.js
H, HH 24 hour time
h, or hh 12 hour time (use in conjunction with a or A)
format()方法以特定格式返回日期。
moment(new Date()).format("YYYY-MM-DD HH:mm"); // 24H clock
moment(new Date()).format("YYYY-MM-DD hh:mm A"); // 12H clock (AM/PM)
moment(new Date()).format("YYYY-MM-DD hh:mm a"); // 12H clock (am/pm)
- Ankur Mahajan
2
这个12小时制的格式救了我的一天，谢谢。 - Banjali
@Banjali，感谢您的赞赏。如果它对您有帮助，请点赞。 - Ankur Mahajan
19
我的建议是使用moment.js来进行日期和时间操作。
https://momentjs.com/docs/#/displaying/format/
console.log(moment().format('hh:mm a'));<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>- Vijay Maheriya
17
更新以获得更高的压缩率
const formatAMPM = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
const ampm = hours >= 12 ? 'pm' : 'am';
hours %= 12;
hours = hours || 12;
minutes = minutes < 10 ? `0${minutes}` : minutes;
const strTime = `${hours}:${minutes} ${ampm}`;
return strTime;
};
console.log(formatAMPM(new Date()));
- OnlyZero
1
工作正常。谢谢。 - undefined
14
使用 dateObj.toLocaleString([locales[, options]])
选项1 - 使用 locales
var date = new Date();
console.log(date.toLocaleString('en-US'));
选项2 - 使用选项
var options = { hour12: true };
console.log(date.toLocaleString('en-GB', options));
注意：目前支持所有浏览器，但不包括Safari。
- LiranBo
1
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString - mimo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
警告：toLocaleTimeString() 的行为可能因地区/位置而异。量好再切。 - Abandoned Cart