คุณแสดง JavaScript datetime ในรูปแบบ AM / PM 12 ชั่วโมงอย่างไร


306

คุณแสดงออบเจ็กต์ datetime ของ JavaScript ในรูปแบบ 12 ชั่วโมง (AM / PM) อย่างไร


3
อย่าเสียเวลาในการstackoverflow.com/a/17538193/3541385มันใช้งานได้ ..
Ritesh

2
@ Ritesh WARNING: toLocaleTimeString() may behave differently based on region / location.วัดสองครั้งตัดครั้งเดียว
รถเข็นที่ถูกทิ้งร้าง

@AbandonedCart ที่จริงแล้วเป็นคำพูด?
gilbert-v

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 แม้ว่า
รถเข็นที่ถูกทิ้งร้าง

ฉันจะไม่ชินกับวิธีการที่ convoluted แช่งมันพยายามที่จะทำงานกับวันที่ง่าย ๆ ใน JavaScript 😠
ashleedawg

คำตอบ:


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


3
นอกจากนี้คุณยังประกาศตัวแปร "ชั่วโมง" สองครั้ง แต่ทำให้ "strTime" เป็นอุบัติเหตุทั่วโลก มันไม่ได้สวยงามมากนัก แต่นี่เป็นเทคนิคที่เหมาะสมโดยใช้วิธีการดั้งเดิม
Jon z

สวัสดีคุณสามารถ exaplain มาให้ฉันคุณกำลังทำอะไรอยู่: นาที = นาที <10? '0' + นาที: นาที;
Balz

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's ให้คุณนาทีที่ถูกต้องเป็น: 00 หากคุณต้องใช้วิธีการแก้ปัญหาข้างต้นคุณจะต้องมีบัญชีสำหรับ 00 ด้วย (เหรียญ> 0 && นาที <10)? '0' + นาที: นาที;
Robbie Smith

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


สิ่งที่เกี่ยวกับชั่วโมงนาทีและ AM / PM
reutsey

3
toLocaleStringรองรับ IE11 + เท่านั้น
Neolisk

ตั้งแต่กุมภาพันธ์ 2018 ทำงานได้ดีบน chrome Neolisk - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
......

มันควรจะคืนค่า 07:23, IMO
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>


45

นี่คือวิธีการใช้ regex:

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)

จากนั้นจะแสดงกลุ่มที่ 1 และ 3

คำเตือน: toLocaleTimeString () อาจทำงานแตกต่างกันไปตามภูมิภาค / สถานที่


3
ผู้คนใช้ Regex ไม่เพียงพอ สิ่งนี้ใช้ได้สำหรับฉันโดยไม่เพิ่มคำแนะนำไลบรารี jquery / microsoftajax ด้านบน
uadrive

สิ่งที่จะเป็น regex จะมีศูนย์ต่อท้ายที่จุดเริ่มต้นของชั่วโมงถ้ามันเป็นหลักเดียว พูดในตัวอย่างแรกของคุณที่ 20:12 น. มันจะเป็นเวลา 08:12 น.
RADXack

1
@ 404 ก็เหมือนกันที่([\d]+:[\d]{2})เป็นส่วนหนึ่งที่เรามีความสนใจใน. ใช้ลำไส้ใหญ่ (:) [\d]+เป็นตัวคั่นและเราเห็นส่วนแรกคือ เครื่องหมายบวกหมายถึงหนึ่งหรือมากกว่านั้น ดังนั้นจึงมองหาตัวเลขหนึ่งหลักหรือมากกว่า (รวมศูนย์ถ้าคุณต้องรับประกันว่ามีศูนย์อยู่ที่นั่น(0[\d]:[\d]{2})ตอนนี้อ่านแล้วมองหา 0 บวกอีกหนึ่งหลักจากนั้นจึงเครื่องหมายจุดคู่ที่เหลือ
Steve Tauber

1
console.log (วันที่ใหม่ (). toLocaleTimeString (). แทนที่ (/ ([\ 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


3
@koolinc ในเวลาเที่ยงคืนแสดงให้เห็นว่า 12. ฉันไม่แน่ใจว่าสิ่งที่ต้องการจะเป็นอย่างไร
rattray

ฉันยืนแก้ไขแล้ว ในประเทศของฉันมีการใช้นาฬิกาแบบ 24 ชั่วโมงดังนั้นฉันจึงไม่คุ้นเคยกับนาฬิกาแบบ 12 ชั่วโมง แน่นอนเที่ยงคืนคือ 12:00 น.
KooiInc

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 () โดยไม่แสดงวินาทีได้อย่างไร


16

ข้อเสนอแนะของฉันคือใช้ช่วงเวลา js สำหรับการดำเนินงานวันที่และเวลา

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

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


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 ชั่วโมง = (d.getHours () <= 12) ยังคงมีปัญหากับเที่ยงคืนดังนั้นคุณต้องตรวจสอบว่าศูนย์แล้วตั้งค่าเป็น 12 ด้วย
Ryan

11

ใช้ 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



9

RegExp สั้น ๆ สำหรับเรา:

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

สิ่งนี้ใช้งานไม่ได้กับเบราว์เซอร์ซาฟารีและ Firefox ล่าสุดเวลายังคงใช้รูปแบบ 24 ชั่วโมง
euther

1
คำตอบจะล้าสมัยเมื่อเวลาผ่านไป รู้สึกฟรีเพื่อแก้ไขและอัปเดต!
ภูมิศาสตร์

สิ่งนี้จะทำให้สตริงดูเหมือน1:54 PM CDTจริง เพื่อลบCDTแก้ไข regex .replace(/:\d+ |\CDT/g, ' ')ของคุณต่อไปนี้ แม้ว่า CDT เป็นเพียงเขตเวลาของฉัน หากคุณมีเขตเวลาที่แตกต่างกันฉันคิดว่าคุณจะต้องเปลี่ยนเป็นรหัสโซนนั้น
sadmicrowave

เอาต์พุตของtoLocaleTimeStringขึ้นอยู่กับการใช้งานดังนั้นจึงไม่น่าเชื่อถือในรูปแบบเดียวกันทุกที่
RobG

9

ในเบราว์เซอร์สมัยใหม่ให้ใช้Intl.DateTimeFormatและบังคับรูปแบบ 12 ชม. พร้อมตัวเลือก:

    let now = new Date();

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

    // 6:30 AM

การใช้defaultจะให้เกียรติสถานที่ตั้งเริ่มต้นของเบราว์เซอร์หากคุณเพิ่มตัวเลือกเพิ่มเติม


ในการใช้สิ่งนี้กำหนดสตริงใหม่ให้กับตัวแปรเช่น: let result = new Intl.DateTi .... alert (result);
Scot Nery

7

ใช้Moment.jsเพื่อสิ่งนี้

ใช้รหัสด้านล่างใน JavaScript เมื่อใช้ moment.js

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)

5

ตรวจสอบDatejs ฟอร์แมตเตอร์ในตัวสามารถทำได้ดังนี้: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

มันเป็นห้องสมุดที่มีประโยชน์มากโดยเฉพาะถ้าคุณวางแผนที่จะทำสิ่งอื่นกับวัตถุวันที่


คำตอบเช่น " use library X " ไม่เป็นประโยชน์ พวกเขาสามารถแสดงความคิดเห็นได้ดี
RobG

1
@RobG: อย่างที่คุณเห็นมันค่อนข้างนานแล้วตั้งแต่ฉันได้เขียนคำตอบนี้ ตอนนี้ฉันรู้แล้ว
Chris Laplante

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

และตัวอย่างพลั่วที่นี่


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 เป็นเลิศ! สิ่งนี้จะป้องกันไม่ให้เกิดค่าศูนย์เมื่อเป็นเวลา 12.00 น. หรือ 12.00 น.
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 -->

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

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>


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>

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

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

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


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

-1

ลองนี้

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

สิ่งนี้ไม่ถูกต้อง ชั่วโมงอาจมากกว่า 12
Utsav T

เมื่อ 12.00 น. var ampm จะเป็น "pm" ดังนั้นเวลา 12.00 น. ถึง 23.00 น. ชั่วโมงจะเป็นเวลา 12 ถึง 23 ชั่วโมงที่เก็บค่า "pm" และสำหรับคนอื่น ๆ var ampm จะเก็บค่า "am" หวังว่าคุณจะเข้าใจ.
Md Juyel Rana

สวัสดี Juyel! แน่นอนเมื่อชั่วโมงมากกว่า 12 ค่าจะเป็น PM แต่คำถามคือ "คุณแสดงวันที่และเวลาของ JavaScript ในรูปแบบ AM / PM 12 ชั่วโมงได้อย่างไร" - คุณต้องช่วย OP แปลงเวลาทั้งหมดเป็นรูปแบบ AM / PM ตัวอย่างเช่น 14:30 จะเป็น 2:30 PM
Utsav T
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.