如何以12小时格式(AM/PM)显示JavaScript datetime对象?


当前回答

下面是一种使用regex的方法:

console.log(新日期(“7/10/2013 20:12:34”).toLocaleTimeString () .replace (/ ((\ d) +: \ d {2}) (: \ [d] {2 })(.*)/, "$ 1美元3”)) console.log(新日期(“7/10/2013 01:12:34”).toLocaleTimeString () .replace (/ ((\ d) +: \ d {2}) (: \ [d] {2 })(.*)/, "$ 1美元3”))

这将创建3个匹配组:

([\d]+:[\d]{2}) -小时:分钟 (:[\d]{2}) -秒 (.*) -空格和时段(时段是AM/PM的正式名称)

然后显示第1组和第3组。

警告:toLocaleTimeString()可能会根据区域/位置表现不同。

其他回答

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

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

console.log(时刻)。格式(“hh: mm ')); < script src = " / / cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js " > < /脚本>

希望这个答案比其他答案更容易理解(尤其是对新手来说)。

以下是我在一些站点中实现的解决方案,用于通知上次修改站点代码的时间。它通过date的选项参数实现AM/PM时间。toLocaleDateString(参见相关的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>

注意:在这个用例中,是文档。lastModified有一些奇怪的行为,这取决于它是在本地运行还是在外部服务器上运行(参见这个堆栈溢出问题)。虽然当我在我的GitHub页面上运行它时,它可以正常工作(你应该在网站的页脚处看到它在运行)。

下面是一种使用regex的方法:

console.log(新日期(“7/10/2013 20:12:34”).toLocaleTimeString () .replace (/ ((\ d) +: \ d {2}) (: \ [d] {2 })(.*)/, "$ 1美元3”)) console.log(新日期(“7/10/2013 01:12:34”).toLocaleTimeString () .replace (/ ((\ d) +: \ d {2}) (: \ [d] {2 })(.*)/, "$ 1美元3”))

这将创建3个匹配组:

([\d]+:[\d]{2}) -小时:分钟 (:[\d]{2}) -秒 (.*) -空格和时段(时段是AM/PM的正式名称)

然后显示第1组和第3组。

警告:toLocaleTimeString()可能会根据区域/位置表现不同。

这里有另一种简单有效的方法:

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