如何以12小时AM / PM格式显示JavaScriptdate时间?

如何以12小时格式(AM / PM)显示JavaScriptdate时间对象?

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; } 

你也可以考虑使用类似date.js的东西:

 <html> <script type="text/javascript" src="http://www.datejs.com/build/date.js"></script> <script> (function () { document.write(new Date().toString("hh:mm tt")); })(); </script> </html> 

如果你只是想显示小时数

 var time = new Date(); time = time.toLocaleString('en-US', { hour: 'numeric', hour12: true }); 

输出:上午7点

如果你想显示会议logging,那么…

 var time = new Date(); time = time.toLocaleString('en-US', { hour: 'numeric',minute:'numeric', hour12: true }); 

输出:上午7:23

如果你不需要打印上午/下午,我发现以下很好和简洁:

 var now = new Date(); var hours = now.getHours() % 12 || 12; // 12h instead of 24h, with 12 instead of 0. 

这是基于@ bbrame的答案。

这是使用正则expression式的一种方法:

 new Date('7/10/2013 20:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3") "8:12 PM" new Date('7/10/2013 01:12:34').toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3") "1:12 AM" 

这创build了3个匹配的组:

  • ([\d]+:[\d]{2}) – 小时:分钟
  • (:[\d]{2}) – 秒
  • (.*) – 空格和句点(句号是AM / PM的正式名称)

然后显示第一和第三组。

警告:toLocaleTimeString()可能会根据区域/位置有所不同。

使用dateObj.toLocaleString([locales[, options]])

选项1 – 使用区域设置

 var date = new Date(); console.log(date.toLocaleString('en-US')); 

选项2 – 使用选项

 var options = { hour12: true }; console.log(date.toLocaleString('en-GB', options)); 

注意:支持所有浏览器,但safari atm

en-US的简短RegExp:

 var d = new Date(); d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, eg "1:54 PM" 

据我所知,没有扩展和复杂编码的最好方法是这样的:

  date.toLocaleString([], { hour12: true}); 

JavaScript AM / PM格式

 <!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> 

签出Datejs 。 他们内置的格式化程序可以这样做: http : //code.google.com/p/datejs/wiki/APIDocumentation#toString

这是一个非常方便的库,特别是如果你打算用date对象做其他事情。

我的build议是使用js进行date和时间操作。

https://momentjs.com/docs/#/displaying/format/

 console.log(moment().format('hh:mm a')); 
 <script src="ajax/libs/moment.js/2.17.1/moment.min.js"></script> 

这是另一种简单而有效的方式:

  var d = new Date(); var weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; weekday[2] = "Tuesday"; weekday[3] = "Wednesday"; weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; var month = new Array(11); month[0] = "January"; month[1] = "February"; month[2] = "March"; month[3] = "April"; month[4] = "May"; month[5] = "June"; month[6] = "July"; month[7] = "August"; month[8] = "September"; month[9] = "October"; month[10] = "November"; month[11] = "December"; var t = d.toLocaleTimeString().replace(/:\d+ /, ' '); document.write(weekday[d.getDay()] + ',' + " " + month[d.getMonth()] + " " + d.getDate() + ',' + " " + d.getFullYear() + '<br>' + d.toLocaleTimeString()); </script></div><!-- #time --> 

我发现它在这里工作正常。

 var date_format = '12'; /* FORMAT CAN BE 12 hour (12) OR 24 hour (24)*/ var d = new Date(); var hour = d.getHours(); /* Returns the hour (from 0-23) */ var minutes = d.getMinutes(); /* Returns the minutes (from 0-59) */ var result = hour; var ext = ''; if(date_format == '12'){ if(hour > 12){ ext = 'PM'; hour = (hour - 12); if(hour < 10){ result = "0" + hour; }else if(hour == 12){ hour = "00"; ext = 'AM'; } } else if(hour < 12){ result = ((hour < 10) ? "0" + hour : hour); ext = 'AM'; }else if(hour == 12){ ext = 'PM'; } } if(minutes < 10){ minutes = "0" + minutes; } result = result + ":" + minutes + ' ' + ext; console.log(result); 

并在这里蹲下的例子

你可以用这个简单的代码来确定上午或下午

 var today=new Date(); var noon=new Date(today.getFullYear(),today.getMonth(),today.getDate(),12,0,0); var ampm = (today.getTime()<noon.getTime())?'am':'pm'; 
 var d = new Date(); var hours = d.getHours() % 12; hours = hours ? hours : 12; var test = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][(d.getMonth() + 1)] + " " + ("00" + d.getDate()).slice(-2) + " " + d.getFullYear() + " " + ("00" + hours).slice(-2) + ":" + ("00" + d.getMinutes()).slice(-2) + ":" + ("00" + d.getSeconds()).slice(-2) + ' ' + (d.getHours() >= 12 ? 'PM' : 'AM'); document.getElementById("demo").innerHTML = test; 
 <p id="demo" ></p> 

或者只是简单地做下面的代码:

  <script> time = function() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('txt_clock').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(function(){time()}, 0); } time2 = function() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); if (h>12) { document.getElementById('txt_clock_stan').innerHTML = h-12 + ":" + m + ":" + s; } var t = setTimeout(function(){time2()}, 0); } time3 = function() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); if (h>12) { document.getElementById('hour_line').style.width = h-12 + 'em'; } document.getElementById('minute_line').style.width = m + 'em'; document.getElementById('second_line').style.width = s + 'em'; var t = setTimeout(function(){time3()}, 0); } checkTime = function(i) { if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } </script> 

一个简短而甜蜜的实现:

 // returns date object in 12hr (AM/PM) format var formatAMPM = function formatAMPM(d) { var h = d.getHours(); return (h % 12 || 12) + ':' + d.getMinutes().toString().padStart(2, '0') + ' ' + (h < 12 ? 'A' : 'P') + 'M'; };