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

Posted

技术标签:

【中文标题】如何以 12 小时 AM/PM 格式显示 JavaScript 日期时间?【英文标题】:How do you display JavaScript datetime in 12 hour AM/PM format? 【发布时间】:2012-02-11 21:28:32 【问题描述】:

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

【问题讨论】:

不要浪费你的时间***.com/a/17538193/3541385它的工作.. @Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location. 测量两次,切割一次。 @AbandonedCart 这真的是一种说法吗? @gilbert-v One should double-check one's measurements for accuracy before cutting a piece of wood; otherwise it may be necessary to cut again, wasting time and material. 不过,这个问题最好在 Google 上问。 我将永远习惯于尝试在 JavaScript 中处理简单的日期是多么令人费解。 ?????? 【参考方案1】:

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

【讨论】:

您还两次声明了“hours”变量,但意外地将“strTime”设为全局变量。它不是非常优雅,但这似乎是使用本机方法的正确技术。 @Balz 如果分钟小于 10(例如 16:04),则该语句添加字符串“0”,以便格式化输出为“4:04 PM”而不是“4:4”下午”。请注意,在此过程中,分钟会从数字变为字符串。 我更喜欢这个minutes = ('0'+minutes).slice(-2); 而不是minutes = minutes &lt; 10 ? '0'+minutes : minutes; @Vignesh 几分钟的解决方案更好,因为如果你正在做建议的 21:00:00 变成 9:000。 Vignesh 为您提供正确的分钟数:00。如果您要使用上述解决方案,那么您还必须考虑 00。 (分钟>0 && 分钟 这太疯狂了,有人提议从头开始构建一个***,如果我们有 JS 内置的东西,它得到了这么多票并显示为最佳答案。投反对票,并且个人不喜欢这种态度,我可以自己实施,然后再检查是否有针对您的问题的良好内置解决方案,即经过良好测试、维护和推荐。只需看看toLocaleString,它可以以多种方式格式化 JS DateTime,包括您的情况。并且自古以来所有浏览器都支持caniuse.com/?search=toLocaleString【参考方案2】:

如果您只想显示小时数,那么..

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

【讨论】:

小时、分钟和上午/下午呢? 截至 2018 年 2 月,它在 chrome Neolisk 上运行良好 - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 它应该返回 07:23,IMO @HumbleDolt 您可能会将'numeric''2-digit' 混淆。 @Katie 也在 2019 年【参考方案3】:

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

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 的正式名称)

然后显示第一组和第三组。

警告:toLocaleTimeString() 的行为可能因地区/位置而异。

【讨论】:

人们对正则表达式的使用不够。这对我有用,而无需添加上面的 jquery/microsoftajax 库建议。 如果正则表达式在一小时的开头有一个尾随零,那么它是一个数字。在您的第一个 8:12 PM 示例中说是 08:12 PM? @404 也一样,([\d]+:[\d]2) 是我们感兴趣的部分。使用冒号(:)作为分隔符,我们看到第一部分是[\d]+。加号表示一个或多个。所以它正在寻找一个或多个数字(包括零。如果你必须保证那里有一个零,那就是(0[\d]:[\d]2)。现在读取,寻找 0 加上一个其他数字,然后是冒号,然后是其余的。跨度> console.log(new Date().toLocaleTimeString().replace(/([\d]+:[\d]2)(:[\d]2)( .*)/, "$1$3"));获取当前时间 在澳大利亚不起作用。 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 ) 工作。【参考方案4】:

如果您不需要打印上午/下午,我发现以下简洁明了:

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

这是基于@bbrame 的回答。

【讨论】:

@koolinc 午夜显示 12。我不确定还有什么期望的行为。 我的立场是正确的。在我的国家使用 24 小时制,所以我对 12 小时制不是很熟悉。实际上午夜是凌晨 12:00。【参考方案5】:

据我所知,在没有扩展和复杂编码的情况下实现这一目标的最佳方法是这样的:

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

Javascript AM/PM Format

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

我发现这个检查了这个问题。

How do I use .toLocaleTimeString() without displaying seconds?

【讨论】:

这是最简单的答案。投票是因为它是一个 javascript 原生解决方案。谢谢 这是一个不错的原生解决方案。【参考方案6】:

现代浏览器中,使用Intl.DateTimeFormat 并通过选项强制使用 12 小时格式:

    let now = new Date();

    new Intl.DateTimeFormat('default',
        
            hour12: true,
            hour: 'numeric',
            minute: 'numeric'
        ).format(now);

    // 6:30 AM

如果您添加更多选项,使用 default 将遵循浏览器的默认语言环境,但仍会输出 12 小时格式。

【讨论】:

要使用它,将新字符串分配给一个变量,例如:let result = new Intl.DateTi.... alert(result); 也可以:const time = new Date().toLocaleString([], hour: 'numeric', minute: 'numeric' ); //"6:30 AM"【参考方案7】:

我的建议是使用 moment js 进行日期和时间操作。

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

console.log(moment().format('hh:mm a'));
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"&gt;&lt;/script&gt;

【讨论】:

【参考方案8】:

为此使用Moment.js

使用 moment.js 时在 JavaScript 中使用以下代码

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)

【讨论】:

【参考方案9】:

为更多压缩而更新

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

【讨论】:

【参考方案10】:

使用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 以外的所有浏览器

【讨论】:

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…【参考方案11】:

美国的短正则表达式:

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

【讨论】:

这不适用于最新的 safari 和 firefox 浏览器,时间仍然使用 24 小时格式 答案会随着时间的推移而过时。随意编辑和更新! 这实际上会使字符串看起来像1:54 PM CDT。要删除CDT,请将您的正则表达式更改为以下.replace(/:\d+ |\CDT/g, ' ')。虽然,CDT 只是我的时区。如果您有不同的时区,我想您需要更改为该区域代码。 toLocaleTimeString 的输出依赖于实现,因此并非所有地方都采用相同的格式。【参考方案12】:

请在下面找到解决方案

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;

【讨论】:

应该小于或等于小时计算,否则中午显示为 0。所以:var hour = (d.getHours() 【参考方案13】:

它会返回如下格式

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

【讨论】:

【参考方案14】:

查看Datejs。他们内置的格式化程序可以做到这一点:http://code.google.com/p/datejs/wiki/APIDocumentation#toString

这是一个非常方便的库,尤其是当您打算使用日期对象做其他事情时。

【讨论】:

使用库 X”之类的答案没有帮助。不过,它们可以像 cmets 一样好。 @RobG:如您所见,距离我写这个答案已经有一段时间了。我现在意识到了这一点。【参考方案15】:
<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>

【讨论】:

用 12 获得小时模块非常棒!这可以防止在上午 12 点或下午 12 点时变为零【参考方案16】:

我发现它是 here 它工作正常。

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 示例 here

【讨论】:

【参考方案17】:

这是另一种简单且非常有效的方法:

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

【讨论】:

【参考方案18】:

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

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

【讨论】:

【参考方案19】:

试试这个

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";

【讨论】:

这是不正确的。小时数可能大于 12。 中午 12 点时,var ampm 将为“pm”。所以 12.00 PM 到 11.00 PM 时间将是 12 到 23 点存储“pm”值,而对于其他时间,var ampm 将存储“am”值。希望你能理解。 嗨,朱耶尔!实际上,当小时数大于 12 时,该值将是 PM。但问题是“如何以 12 小时 AM/PM 格式显示 JavaScript 日期时间?” - 您需要帮助 OP 将整个时间转换为 AM/PM 格式。例如,14:30 将是下午 2:30。【参考方案20】:

function formatTime( d = new Date(), ampm = true ) 

    var hour = d.getHours();
    
    if ( ampm )
    
        var a = ( hour >= 12 ) ? 'PM' : 'AM';
        hour = hour % 12;
        hour = hour ? hour : 12; // the hour '0' should be '12'  
    

    var hour    = checkDigit(hour);  
    var minute  = checkDigit(d.getMinutes());
    var second  = checkDigit(d.getSeconds());
  
    // https://***.com/questions/1408289/how-can-i-do-string-interpolation-in-javascript
    return ( ampm ) ? `$hour:$minute:$second $a` : `$hour:$minute:$second`;


function checkDigit(t)

  return ( t < 10 ) ? `0$t` : t;


document.querySelector("#time1").innerHTML = formatTime();
document.querySelector("#time2").innerHTML = formatTime( new Date(), false );
<p>ampm true:   <span id="time1"></span> (default)</p>
<p>ampm false:  <span id="time2"></span></p>

【讨论】:

【参考方案21】:

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;
&lt;p id="demo" &gt;&lt;/p&gt;

【讨论】:

【参考方案22】:
<h1 id="clock_display" class="text-center" style="font-size:40px; color:#ffffff">[CLOCK TIME DISPLAYS HERE]</h1>



<script>
            var AM_or_PM = "AM";

            function startTime()

                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();

                h = twelve_hour_time(h);
                m = checkTime(m);
                s = checkTime(s);



                document.getElementById('clock_display').innerHTML =
                    h + ":" + m + ":" + s +" "+AM_or_PM;
                var t = setTimeout(startTime, 1000);

            

            function checkTime(i)

                if(i < 10)
                    i = "0" + i;// add zero in front of numbers < 10
                
                return i;
            

            // CONVERT TO 12 HOUR TIME. SET AM OR PM
            function twelve_hour_time(h)

                if(h > 12)
                    h = h - 12;
                    AM_or_PM = " PM";
                
                return h;

            

            startTime();

        </script>

【讨论】:

【参考方案23】:
function getDateTime() 
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();

  if (month.toString().length == 1) 
    month = '0' + month;
  
  if (day.toString().length == 1) 
    day = '0' + day;
  

  var hours = now.getHours();
  var minutes = now.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var timewithampm = hours + ':' + minutes + ' ' + ampm;

  var dateTime = monthNames[parseInt(month) - 1] + ' ' + day + ' ' + year + ' ' + timewithampm;
  return dateTime;

【讨论】:

【参考方案24】:

这是我的解决方案

function getTime() 
var systemDate = new Date();
var hours = systemDate.getHours();
var minutes = systemDate.getMinutes();
var strampm;
if (hours >= 12) 
    strampm= "PM";
 else 
    strampm= "AM";

hours = hours % 12;
if (hours == 0) 
    hours = 12;

_hours = checkTimeAddZero(hours);
_minutes = checkTimeAddZero(minutes);
console.log(_hours + ":" + _minutes + " " + strampm);


function checkTimeAddZero(i) 
if (i < 10) 
    i = "0" + i

return i;

【讨论】:

【参考方案25】:
   const formatAMPM = (date) => 
    try 
      let time = date.split(" ");
      let hours = time[4].split(":")[0];
      let minutes = time[4].split(":")[1];
      hours = hours || 12;
      const ampm = hours >= 12 ? " PM" : " AM";
      minutes = minutes < 10 ? `$minutes` : minutes;
      hours %= 12;
      const strTime = `$hours:$minutes $ampm`;
      return strTime;
     catch (e) 
      return "";
    
  ;

const startTime = "2021-12-07T17:00:00.073Z"
formatAMPM(new Date(startTime).toUTCString())

【讨论】:

【参考方案26】:

或者只需执行以下代码:

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

【讨论】:

【参考方案27】:

一个简短而甜蜜的实现:

// 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';
;

【讨论】:

以上是关于如何以 12 小时 AM/PM 格式显示 JavaScript 日期时间?的主要内容,如果未能解决你的问题,请参考以下文章

java 给定AM / PM格式的时间,将其转换为军事(24小时)时间。注意:午夜是12小时制的12:00:00 AM和24小时的00:00:00

[12小时Javascript Clock显示24时间,错误的AM / PM

C# WPF DataGrid 时间字段 显示AM PM,我想飞改成24小时格式。例如:2017/12/1 17:43:53

SQL (HUE) : 有没有办法将 24 小时时间转换为 12 小时 AM / PM 格式与小时桶

需要将时间跨度 ADO.NET 数据列格式化为 AM/PM

如何检查 Cordova 应用程序是不是在 12 (AM/PM) 或 24 小时环境中运行