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

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

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

【问题讨论】：

  • 不要浪费你的时间stackoverflow.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 中处理简单的日期是多么令人费解。 ??????

标签： javascript datetime date time format


【解决方案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

【讨论】：

【解决方案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 以外的所有浏览器

        【讨论】：

        【解决方案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://stackoverflow.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';
};

                              【讨论】：

                                猜你喜欢
                                • 2013-09-15
                                • 1970-01-01
                                • 2016-09-15
                                • 1970-01-01
                                • 1970-01-01
                                • 1970-01-01
                                • 2013-06-10
                                相关资源
                                最近更新 更多
                                热门标签
                                Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode