如何以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'; };