如何以12小时的AM/PM格式显示JavaScript日期时间?

489
你如何在JavaScript中以12小时制(AM/PM)显示日期和时间?

3
不要浪费时间,https://dev59.com/-Gox5IYBdhLWcg3w6oj0#17538193 这个方法可行。 - Ritesh
2
@Ritesh 警告:toLocaleTimeString() 的行为可能因地区/位置而异。 量好再切。 - Abandoned Cart
@AbandonedCart 这真的是一句俗语吗? - gilbert-v
1
@gilbert-v 在切割木材之前,应该仔细检查测量数据的准确性;否则可能需要重新切割,浪费时间和材料。不过,那个问题可能更适合在谷歌上提问。 - Abandoned Cart
2
我将永远不会习惯在 JavaScript 中尝试处理简单日期有多么麻烦。 - ashleedawg
33个回答

12

en-US 的短 RegExp:

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

这在最新版本的Safari和Firefox浏览器中无法正常工作,时间仍然使用24小时制。 - euther
1
随着时间的推移,答案会过时。请随意编辑和更新! - Geo
这实际上会使字符串看起来像 1:54 PM CDT。要删除 CDT,请将您的正则表达式更改为 .replace(/:\d+ |\CDT/g, ' ')。虽然,CDT只是我的时区。如果您有不同的时区,我想您需要更改为该时区代码。 - sadmicrowave
toLocaleTimeString 的输出取决于实现,因此在各处不能保证可靠地具有相同的格式。 - RobG

11
请在下方找到解决方法。
var d = new Date();
var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
return   d.getDate() + ' / ' + d.getMonth() + ' / ' + d.getFullYear() + ' ' + hour + ':' + d.getMinutes() + ' ' + amOrPm;

2
小时计算应该小于或等于,否则中午会显示为0。所以:var hour = (d.getHours() <= 12)。但是午夜仍然存在问题,因此您需要检查是否为零,然后将其设置为12。 - Ryan

7
它将返回以下格式,例如:
09:56 AM

如果小时数小于10,则在小时数前添加一个零

这里使用了ES6语法

const getTimeAMPMFormat = (date) => {
  let hours = date.getHours();
  let minutes = date.getMinutes();
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  hours = hours < 10 ? '0' + hours : hours;
  // appending zero in the start if hours less than 10
  minutes = minutes < 10 ? '0' + minutes : minutes;
  return hours + ':' + minutes + ' ' + ampm;
};
console.log(getTimeAMPMFormat(new Date)); // 09:59 AM


5

希望本答案对新手更易读懂(尤其是与其他答案相比)。

这里是我在一些网站上实现的解决方案,用于通知该网站代码上次修改时间。它通过date.toLocaleDateStringoptions参数实现了AM/PM时间(参见相关Mozilla文档 在此)。

// Last time page code was updated/changed
const options = {
    year: "numeric",
    month: "long",
    weekday: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: true // This is the line of code we care about here
    /*
        false: displays 24hs format for time
        true: displays 12, AM and PM format
    */
};

let last = document.lastModified;
let date = new Date(last);
let local = date.toLocaleDateString("en-US", options);
let fullDate = `${local}`;
document.getElementById("updated").textContent = fullDate;

哪个输出结果的格式如下:
Saturday, May 28, 2022, 8:38:50 PM

然后,这个输出会在以下的HTML代码中显示:
<p>Last update: <span id="updated">_update_date_goes_here</span></p>

注意:在这种情况下,document.lastModified存在一些奇怪的行为,具体取决于它是在本地运行还是在外部服务器上运行(参见此 Stack Overflow 问题)。尽管当我在我的 GitHub 页面上运行它时它能正确工作(您应该在页脚上看到它的效果)。


5

我发现它在这里运行良好。

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);
        result = hour;

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

和 plunker 示例 在这里


4
<script>
var todayDate = new Date();
var getTodayDate = todayDate.getDate();
var getTodayMonth =  todayDate.getMonth()+1;
var getTodayFullYear = todayDate.getFullYear();
var getCurrentHours = todayDate.getHours();
var getCurrentMinutes = todayDate.getMinutes();
var getCurrentAmPm = getCurrentHours >= 12 ? 'PM' : 'AM';
getCurrentHours = getCurrentHours % 12;
getCurrentHours = getCurrentHours ? getCurrentHours : 12; 
getCurrentMinutes = getCurrentMinutes < 10 ? '0'+getCurrentMinutes : getCurrentMinutes;
var getCurrentDateTime = getTodayDate + '-' + getTodayMonth + '-' + getTodayFullYear + ' ' + getCurrentHours + ':' + getCurrentMinutes + ' ' + getCurrentAmPm;
alert(getCurrentDateTime);
</script>

2
获取当前小时模数为12是非常好的!这可以避免在12AM或12PM时得到零。 - Lynnell Neri

4

像“使用库X”这样的回答并不有用。但是它们可以作为评论很好。 - RobG
2
@RobG:正如你所看到的,我写下这个答案已经有一段时间了。现在我意识到了这一点。 - Chris Laplante

3
如果您有一个类似于 var myTime = "15:30" 的时间字符串, 那么您可以使用以下代码获取上午或下午。
var hour = parseInt(myTime.split(":")[0]) % 12;
var timeInAmPm = (hour == 0 ? "12": hour ) + ":" + myTime.split(":")[1] + " " + (parseInt(parseInt(myTime.split(":")[0]) / 12) < 1 ? "am" : "pm");

正是我需要的! - derar sattouf
@derarsattouf 先前的代码在00:00和24:00方面存在问题,我已经修复了。如果您使用了这个,请使用上述更新您的代码。 - salman_sali

3

这里还有一种简单而且非常有效的方法:

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

2

function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  var meridian = h >= 12 ? "PM" : "AM";
  h = h % 12;
  h = h ? h : 12;
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;
  var strTime = h + ":" + m + ":" + s + " " + meridian;
  document.getElementById('time').innerText = strTime;
  setTimeout(startTime, 1000);
}

startTime();
<h1 id='time'></h1>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接