stackoom
  简体   繁体   中英

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

 原文  2012-01-17 01:07:59  1   31    javascript/ datetime/ date/ time/ format

Question

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

31 answers

solution1
 732 ACCPTED  2012-01-17 01:08:28

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

solution2
 357  2016-04-24 10:41:17

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

solution3
 54  2012-01-17 01:21:21

如何以12小时格式（AM / PM）显示JavaScript日期时间对象？

solution4
 48  2013-07-09 00:43:24

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.

solution5
 41  2014-01-07 05:13:44

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.

solution6
 29  2017-01-25 13:16:08

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?

solution7
 26  2019-12-18 05:26:24

In modern browsers, use Intl.DateTimeFormat and force 12hr format with options:

    let now = new Date();

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

    // 6:30 AM

Using default will honor browser's default locale if you add more options, yet will still output 12hr format.

solution8
 19  2017-03-15 13:05:03

My suggestion is use moment js for date and time operation.

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>

solution9
 18  2019-02-01 17:07:55

Use Moment.js for this

Use below codes in JavaScript when using moment.js

H, HH       24 hour time
h, or hh    12 hour time (use in conjunction with a or A)

The format() method returns the date in specific 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)

solution10
 15  2020-11-18 15:09:08

Updated for more compression

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

solution11
 13  2015-10-24 09:13:56

use dateObj.toLocaleString([locales[, options]])

Option 1 - Using locales

var date = new Date();
console.log(date.toLocaleString('en-US'));

Option 2 - Using options

var options = { hour12: true };
console.log(date.toLocaleString('en-GB', options));

Note: supported on all browsers but safari atm

solution12
 11  2013-08-14 17:52:36

Short RegExp for en-US: 

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

solution13
 11  2018-06-07 12:12:15

Please find the solution below

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;

solution14
 7  2020-08-14 05:16:24

It will return the following format like

09:56 AM

appending zero in start for the hours as well if it is less than 10

Here it is using ES6 syntax

 const getTimeAMPMFormat = (date) => { let hours = date.getHours(); let minutes = date.getMinutes(); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12; hours = hours ? hours : 12; // the hour '0' should be '12' hours = hours < 10 ? '0' + hours : hours; // appending zero in the start if hours less than 10 minutes = minutes < 10 ? '0' + minutes : minutes; return hours + ':' + minutes + ' ' + ampm; }; console.log(getTimeAMPMFormat(new Date)); // 09:59 AM

solution15
 5  2015-08-17 08:29:47

I fount it's here it working fine.

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);
        result = hour;

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

and plunker example here

solution16
 4  2018-05-11 23:55:02

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

solution17
 4  2012-01-17 01:20:02

Check out Datejs . Their built in formatters can do this: http://code.google.com/p/datejs/wiki/APIDocumentation#toString

It's a really handy library, especially if you are planning on doing other things with date objects.

solution18
 3  2013-12-09 01:04:04

Here is another way that is simple, and very effective:

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

solution19
 2  2022-05-29 00:45:41

Hopefully this answer is a little more readable than the other answers (especially for new comers).

Here's the solution I've implemented in some of my sites for informing the last time the site code was modified. It implements AM/PM time through the options parameter of date.toLocaleDateString ( see related Mozilla documentation).

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

Which output is in the format:

Saturday, May 28, 2022, 8:38:50 PM

This output is then displayed in the following HTML code:

<p>Last update: <span id="updated">_update_date_goes_here</span></p>

NOTE: In this use case, document.lastModified has some weird behaviors depending if it's run locally or on a external server ( see this Stack Overflow question). Though it works correctly when I run it in my GitHub page (you should see it in action in the site at the footer ).

solution20
 1  2016-10-15 09:30:58

you can determine am or pm with this simple code

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

solution21
 1  2019-09-10 17:43:13

try this

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

solution22
 1  2020-10-14 05:26:43

 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>

solution23
 1  2022-11-06 14:49:09

 function startTime() { const today = new Date(); let h = today.getHours(); let m = today.getMinutes(); let s = today.getSeconds(); var meridian = h >= 12? "PM": "AM"; h = h % 12; h = h? h: 12; m = m < 10? "0" + m: m; s = s < 10? "0" + s: s; var strTime = h + ":" + m + ":" + s + " " + meridian; document.getElementById('time').innerText = strTime; setTimeout(startTime, 1000); } startTime();
 <h1 id='time'></h1>

solution24
 0  2017-10-13 07:50:06

 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>

solution25
 0  2018-02-01 22:11:34

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

solution26
 0  2019-06-09 17:18:31

Here my solution

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

solution27
 0  2019-10-01 09:46:31

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

solution28
 0  2021-12-07 07:38:38

   const formatAMPM = (date) => {
    try {
      let time = date.split(" ");
      let hours = time[4].split(":")[0];
      let minutes = time[4].split(":")[1];
      hours = hours || 12;
      const ampm = hours >= 12 ? " PM" : " AM";
      minutes = minutes < 10 ? `${minutes}` : minutes;
      hours %= 12;
      const strTime = `${hours}:${minutes} ${ampm}`;
      return strTime;
    } catch (e) {
      return "";
    }
  };

const startTime = "2021-12-07T17:00:00.073Z"
formatAMPM(new Date(startTime).toUTCString())

solution29
 0  2022-05-24 09:47:21

This is the easiest Way you can Achieve this using ternary operator or you can also use if else instead !

const d = new Date();
let hrs = d.getHours();
let m = d.getMinutes();
// Condition to add zero before minute
let min = m < 10 ? `0${m}` : m;
const currTime = hrs >= 12 ? `${hrs - 12}:${min} pm` : `${hrs}:${min} am`;
console.log(currTime);

solution30
 0  2022-07-17 11:32:57

如果您有时间作为字符串，例如var myTime = "15:30" ，那么您可以使用以下代码获取 am pm。

parseInt(myTime.split(":")[0]) % 12 + ":" + myTime.split(":")[1] + " " + (parseInt(parseInt(myTime.split(":")[0]) / 12) != 1 ? "am" : "pm")

solution31
 -1  2014-10-03 12:20:48

Or just simply do the following code:

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

solution32
 -1  2017-09-21 17:02:41

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to add options for 24 hours in 12 hour AM/PM format? Alternative way to display hour in AM/PM format in a table row-wise per hour 12 AM to 11 PM in angular JS Display business opening hours in 12 hour format (9am - 6pm) instead of 24 hours Need 12 hour format without showing AM/PM Timepicker How do you tell if a datetime is am or pm using luxon / moment? I am trying to convert to a 12 hour format in javascript, but when I use the modulo operator it changes PM back to AM 12 hour Javascript Clock Showing 24 time, Wrong AM/PM Display Time in 12 Hour Format in JavaScript How do you format a datetime to am/pm, without periods, when using date-fns version 2.x? How do you create a 12hour time in JavaScript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM