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

306

如何以12小时格式（AM / PM）显示JavaScript日期时间对象？

javascript  datetime  date  time  format 
— 布拉姆
source
3
不要浪费您的时间stackoverflow.com/a/17538193/3541385它的工作..
— Ritesh
2
@Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.测量两次，切一次。
— 被遗弃的购物车，
@AbandonedCart实际上是一句名言吗？
— 吉尔伯特五世
1
@ 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中使用简单的日期如何令人费解。😠
— ashleedawg

Answers:

545 

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));
展开摘要

— 布拉姆
source
3
同样，您两次声明了“ hours”变量，但使“ strTime”成为意外的全局变量。它并不十分优雅，但这似乎是使用本机方法的正确技术。
— Jon z
嗨，您能告诉我您在做什么吗：分钟=分钟<10？'0'+分钟：分钟；
— Balz 2013年
2
@Balz如果分钟数小于10（例如16:04），则该语句添加字符串“ 0”，以便格式化输出为“ 4:04 PM”而不是“ 4：4 PM”。请注意，在此过程中，分钟数从数字更改为字符串。
— Caleb Bell
7
我更喜欢这个，minutes = ('0'+minutes).slice(-2);而不是 minutes = minutes < 10 ? '0'+minutes : minutes;
— Vignesh
1
@Vignesh分钟的解决方案更好，因为如果您要这样做，建议的21:00:00变为9：000。Vignesh为您提供正确的分钟：00。如果要使用上述解决方案，则还必须考虑00。（分钟数> 0 &&分钟<10）？'0'+分钟：分钟；
— 罗比·史密斯
201

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

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', hour12: true })
);
展开摘要

输出：7 AM

如果您还希望显示分钟，则...

var time = new Date();
console.log(
  time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
);
展开摘要

输出：7:23 AM

— 阿比·库玛（Abhay Kumar）
source
时间，分钟和AM / PM呢？
— reutsey
3
toLocaleString仅在IE11 +上受支持。
— Neolisk
由于2018年2月它工作得很好对铬Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
— lfender6445
它应该返回IMO 07:23
— Humble Dolt
@HumbleDolt你可能会混淆'numeric'与'2-digit'。
— hon2a
55

您也可以考虑使用类似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>
展开摘要

— 迈克·克里斯滕森
source
45

这是使用正则表达式的方法：

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（）的行为可能因地区/位置而异。

— 史蒂夫·陶伯
source
3
人们对正则表达式的使用不够。这对我有用，而没有添加上面的jquery / microsoftajax库建议。
— uadrive 2014年
如果是个位数，则正则表达式将在小时开始时尾随零。在您第一个8:12 PM的例子中说，应该是08:12 PM？
— RADXack '17
1
@ 404相同，([\d]+:[\d]{2})是我们感兴趣的部分。使用冒号（:)作为分隔符，我们看到的第一部分是[\d]+。加号表示一个或多个。所以它在寻找一个或多个数字（包括零如果你必须保证零是存在的，这将是(0[\d]:[\d]{2})该现在读，看0加上一个其他的数字，然后冒号，然后休息。
— 史蒂夫堡
1
console.log（new Date（）。toLocaleTimeString（）。replace（/（[\ d] +：[\ d] {2}）（：[\ d] {2}）（。*）/，“ $ 1 $ 3 “））; 要获取当前时间
— Mujaffars
35

如果您不需要打印am / pm，我发现以下内容简洁明了： 

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

这是基于@bbrame的答案。

— 托盘
source
3
@koolinc在午夜显示12。我不确定期望的行为还会是什么。
— 拉特雷
我站得住了。在我国，使用24小时制，所以我对12小时制并不那么熟悉。确实，午夜是12:00 am。
— KooiInc 2015年
16

据我所知，没有扩展和复杂编码的最佳方法是这样的：

     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>
展开摘要

我发现此检查出此问题。

如何在不显示秒的情况下使用.toLocaleTimeString（）？

— 埃德温·门德斯（Edwin Mendez）
source
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;
— Krishnamoorthy阿查里亚
source
应小于或等于小时计算，否则中午显示为0。因此：var hour =（d.getHours（）<= 12）。午夜仍然存在问题，因此您必须检查是否为零，然后也设置为12。
— 瑞安
9

英文的简短RegExp：

var d = new Date();
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); // current time, e.g. "1:54 PM"
— 地缘
source
这在最新的safari和firefox浏览器上不起作用，时间仍使用24小时格式
— 2014年
1
随着时间的流逝，答案变得过时。随时编辑和更新！
— 2014年
这实际上会使字符串看起来像1:54 PM CDT。要删除CDT您的正则表达式更改为以下内容.replace(/:\d+ |\CDT/g, ' ')。虽然，CDT只是我的时区。如果您使用其他时区，我想您需要更改为该时区代码。
— sadmicrowave
toLocaleTimeString的输出依赖于实现，因此在任何地方都不可靠地使用相同的格式。
— RobG '17
9

在现代浏览器中，使用以下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
source
要使用此功能，请将新字符串分配给变量，例如：let result = new Intl.DateTi .... alert（result）;
— Scot Nery
7

为此使用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)
— 安库·玛哈詹（Ankur Mahajan）
source
4

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

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

和punker的例子在这里

— vamsikrishnamannem
source
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>
— Pankaj Upadhyay
source
2
用12来获取小时模块非常好！这样可以防止在凌晨12点或下午12点时获得零
— Lynnell Emmanuel Neri
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 -->
— 用户名
source
1

您可以使用此简单代码确定上午或下午

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';
— 萨科罗卡
source
0 

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>
展开摘要

— 苏吉思
source
0 
<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>
— 斯坦福利
source
0 
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;
}
— 维客2696
source
0

这是我的解决方案

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;
}
— Prathamesh更多
source
-1

或者只是简单地执行以下代码：

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

— 赞恩·雅各布
source
-1

一个简短而甜蜜的实现：

// 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';
};
— 约翰钦乔
source
-1

尝试这个

      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var ampm = hours >= 12 ? "pm" : "am";
— 朱耶尔·拉纳（Md Juyel Rana）
source
这是不正确的。的时间可以是大于12
— UTSAVŤ
下午12:00时，var ampm将为“ pm”。因此，下午12.00 PM到11.00 PM小时将是存储“ pm”值的12到23小时，对于其他时间，var ampm将存储“ am”值。希望你能理解。
— Judel Rana博士
嗨Juyel！实际上，当小时数大于12时，该值为PM。但是问题是“如何以12小时AM / PM格式显示JavaScript日期时间？” -您需要帮助OP将整个时间转换为AM / PM格式。例如，14:30将是2:30 PM。
— Utsav T
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.