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

后端未结

关注

 27  3102

慢半拍i

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

相关标签:

27条回答

梦如初夏

2020-11-22 03:12

A short and sweet implementation:

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

0 讨论(0)

温柔的废话

2020-11-22 03:14
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)
Then it displays the 1st and 3rd groups.

WARNING: toLocaleTimeString() may behave differently based on region / location.
0 讨论(0)
发布评论:

提交评论
- 加载中...

半阙折子戏

2020-11-22 03:14

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?

0 讨论(0)

遥遥无期

2020-11-22 03:14

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>

0 讨论(0)

甜味超标

2020-11-22 03:15
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

滥情空心

2020-11-22 03:15

try this

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

0 讨论(0)