How do you display JavaScript datetime in 12 hour AM/PM format?

How do you display JavaScript datetime in 12 hour AM/PM format?

How do you display a JavaScript datetime object in the 12 hour format (AM/PM)?

Solutions/Answers:

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

Solution 2:

If you just want to show the hours then..

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

Output : 7 AM

If you wish to show the minutes as well then…

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

Output : 7:23 AM

Solution 3:

You can also consider using something like 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>

Solution 4:

Here’s a way using 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"))

This creates 3 matching groups:

  • ([\d]+:[\d]{2}) – Hour:Minute
  • (:[\d]{2}) – Seconds
  • (.*) – the space and period (Period is the official name for AM/PM)
Related:  VueJs templating. How to load external templates

Then it displays the 1st and 3rd groups.

WARNING: toLocaleTimeString() may behave differently based on region / location.

Solution 5:

If you don’t need to print the am/pm, I found the following nice and concise:

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

This is based off @bbrame’s answer.

Solution 6:

As far as I know, the best way to achieve that without extensions and complex coding is like this:

     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>

I found this checking this question out.

How do I use .toLocaleTimeString() without displaying seconds?