คุณจะแสดงวันที่และเวลาของ JavaScript ในรูปแบบ 12 ชั่วโมง AM/PM อย่างไร?

คุณจะแสดงวัตถุวันที่เวลาใน JavaScript ในรูปแบบ 12 ชั่วโมง (AM/PM) ได้อย่างไร?

คำตอบ #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));

คำตอบ #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

ถ้าคุณไม่จำเป็นต้องพิมพ์เช้า/เย็น ผมพบสิ่งต่อไปนี้ที่ดีและกระชับ:

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

นี่อ้างอิงจากคำตอบของ @bbrame

คำตอบ #4

นี่คือวิธีการใช้ 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() อาจทำงานแตกต่างกันไปตามภูมิภาค/ตำแหน่งที่ตั้ง

คำตอบ #5

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

    let now = new Date();

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

    // 6:30 AM

การใช้ default จะเคารพภาษาตามค่าเริ่มต้นของเบราว์เซอร์หากคุณเพิ่มตัวเลือกมากขึ้น แต่ยังคงแสดงผลเป็นรูปแบบ 12 ชั่วโมงอยู่

คำตอบ #6

เท่าที่ฉันทราบ วิธีที่ดีที่สุดในการทำเช่นนั้นโดยไม่ต้องใช้ส่วนขยายและการเขียนโค้ดที่ซับซ้อนคือแบบนี้:

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

รูปแบบ AM/PM ของ Javascript

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

คำตอบ #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)

คำตอบ #8

ข้อเสนอของฉันคือใช้ moment 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>

คำตอบ #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 ขณะนี้

คำตอบ #11

RegExp สั้นสำหรับ en-US:

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

คำตอบ #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;