Login/Register
Converting 24 hour time to 12 hour time w/ AM & PM using Javascript
Asked Answered
Solved javascriptdatetimetimeformatting
M

25

79

What is the best way to convert the following JSON returned value from a 24-hour format to 12-hour format w/ AM & PM? The date should stay the same - the time is the only thing that needs formatting.

February 04, 2011 19:00:00

P.S. Using jQuery if that makes it any easier! Would also prefer a simple function/code and not use Date.js.

Md answered 4/2, 2011 at 13:38 Comment(2)
In what context do you want to use this? Is it for display purposes? – Burkitt
possible duplicate of How do you display javascript datetime in 12 hour AM/PM format? – Anasarca
G
72

UPDATE 2: without seconds option

UPDATE: AM after noon corrected, tested: http://jsfiddle.net/aorcsik/xbtjE/

I created this function to do this:

function formatDate(date) {
  var d = new Date(date);
  var hh = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  var dd = "AM";
  var h = hh;
  if (h >= 12) {
    h = hh - 12;
    dd = "PM";
  }
  if (h == 0) {
    h = 12;
  }
  m = m < 10 ? "0" + m : m;

  s = s < 10 ? "0" + s : s;

  /* if you want 2 digit hours:
  h = h<10?"0"+h:h; */

  var pattern = new RegExp("0?" + hh + ":" + m + ":" + s);

  var replacement = h + ":" + m;
  /* if you want to add seconds
  replacement += ":"+s;  */
  replacement += " " + dd;

  return date.replace(pattern, replacement);
}

alert(formatDate("February 04, 2011 12:00:00"));
Grassgreen answered 4/2, 2011 at 14:5 Comment(8)
Your function displays the hour after noon as "a.m." instead of "p.m.". – Trenton
What is the best way to get rid of the seconds (to show only 7:00 PM for example)? Sorry I wasn't more detailed in my original post and my JS is very minimal! I tried removing the '+s' but it just adds the seconds to the end of the AM/PM. Thanks again! – Md
@Slynthic Added the part to set the seconds on/off. – Grassgreen
The first hour of PM comes back as 0, which is still incorrect - it should display as 12. You need an additional clause inside the if (h >=12) block, e.g. if (h != 12) h = hh-12 should do the trick. – Stomato
@Stomato No. After that part, there is an if (h == 0) { h = 12; } This handles the 0-s. – Grassgreen
Right, sorry - I actually added unit tests, and it was failing, but that was because of another little bug I added while porting this to C# ... sorry about that! (should I erase my first comment?) – Stomato
TypeError: date.replace is not a function – Inherit
This works only if you put the date manually as your format "February 04, 2011 12:00:00", I need to convert the original date object (it is dynamic in my case) exp "Tue Jun 20 2017 12:13:13 GMT+0300 (Middle East Daylight Time)" – Commination
T
139

This is how you can change hours without if statement:

hours = ((hours + 11) % 12 + 1);
Typewriter answered 18/1, 2013 at 12:39 Comment(5)
Excellent! But, missing the 'terse' AM/PM part. :) – Sligo
Excellent thinking!!! var suffix = hours >= 12 ? "PM":"AM"; hours = ((hours + 11) % 12 + 1) + suffix; This will add AM/PM also. – Unrelenting
Can somebody explain the math behind this? – Krasnoyarsk
@Krasnoyarsk % is the mod operation. For example, let's say that it's 23:00. We would add 23 + 11 = 34. 34 % 12 = 10 because 34 / 12 is 2 with a remainder of 10. Finally, you add + 1 and you get 11, which is the correct conversion for 23:00. – Mineraloid
@JCRaja You made a small mistake in your logic. hours should be less than or equal to 12 for PM: var suffix = hours <= 12 ? "PM":"AM"; hours = ((hours + 11) % 12 + 1) + suffix; – Bern
G
72

UPDATE 2: without seconds option

UPDATE: AM after noon corrected, tested: http://jsfiddle.net/aorcsik/xbtjE/

I created this function to do this:

function formatDate(date) {
  var d = new Date(date);
  var hh = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  var dd = "AM";
  var h = hh;
  if (h >= 12) {
    h = hh - 12;
    dd = "PM";
  }
  if (h == 0) {
    h = 12;
  }
  m = m < 10 ? "0" + m : m;

  s = s < 10 ? "0" + s : s;

  /* if you want 2 digit hours:
  h = h<10?"0"+h:h; */

  var pattern = new RegExp("0?" + hh + ":" + m + ":" + s);

  var replacement = h + ":" + m;
  /* if you want to add seconds
  replacement += ":"+s;  */
  replacement += " " + dd;

  return date.replace(pattern, replacement);
}

alert(formatDate("February 04, 2011 12:00:00"));
Grassgreen answered 4/2, 2011 at 14:5 Comment(8)
Your function displays the hour after noon as "a.m." instead of "p.m.". – Trenton
What is the best way to get rid of the seconds (to show only 7:00 PM for example)? Sorry I wasn't more detailed in my original post and my JS is very minimal! I tried removing the '+s' but it just adds the seconds to the end of the AM/PM. Thanks again! – Md
@Slynthic Added the part to set the seconds on/off. – Grassgreen
The first hour of PM comes back as 0, which is still incorrect - it should display as 12. You need an additional clause inside the if (h >=12) block, e.g. if (h != 12) h = hh-12 should do the trick. – Stomato
@Stomato No. After that part, there is an if (h == 0) { h = 12; } This handles the 0-s. – Grassgreen
Right, sorry - I actually added unit tests, and it was failing, but that was because of another little bug I added while porting this to C# ... sorry about that! (should I erase my first comment?) – Stomato
TypeError: date.replace is not a function – Inherit
This works only if you put the date manually as your format "February 04, 2011 12:00:00", I need to convert the original date object (it is dynamic in my case) exp "Tue Jun 20 2017 12:13:13 GMT+0300 (Middle East Daylight Time)" – Commination
A
43
    //it is pm if hours from 12 onwards
    suffix = (hours >= 12)? 'pm' : 'am';

    //only -12 from hours if it is greater than 12 (if not back at mid night)
    hours = (hours > 12)? hours -12 : hours;

    //if 00 then it is 12 am
    hours = (hours == '00')? 12 : hours;
Assamese answered 30/4, 2012 at 14:11 Comment(0)
H
36

For anyone reading who wants ONLY the time in the output, you can pass options to JavaScript's Date::toLocaleString() method. Example:

var date = new Date("February 04, 2011 19:00:00");
var options = {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
};
var timeString = date.toLocaleString('en-US', options);
console.log(timeString);

timeString will be set to:

8:00 AM

Add "second: 'numeric'" to your options if you want seconds too. For all option see this.

Homing answered 28/3, 2016 at 21:37 Comment(3)
perfect, this is just what I was looking for. – Messier
it works nice, but for only time we can try this new one : new Date().toLocaleTimeString('en-US'); – Pallium
Nice. include timeZone in options if needed. var options = { timeZone: 'Asia/Kolkata', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; – Roam
C
7

Here's a reasonably terse way to do it using a Prototype:

Date.prototype.getFormattedTime = function () {
    var hours = this.getHours() == 0 ? "12" : this.getHours() > 12 ? this.getHours() - 12 : this.getHours();
    var minutes = (this.getMinutes() < 10 ? "0" : "") + this.getMinutes();
    var ampm = this.getHours() < 12 ? "AM" : "PM";
    var formattedTime = hours + ":" + minutes + " " + ampm;
    return formattedTime;
}

Then all you have to do is convert your string value to a date and use the new method:

var stringValue = "February 04, 2011 19:00:00;
var dateValue = new Date(stringValue);
var formattedTime = dateValue.getFormattedTime();

Or in a single line:

var formattedTime = new Date("February 04, 2011 19:00:00").getFormattedTime();
Carat answered 4/6, 2012 at 17:37 Comment(1)
I like this one, but this.getMinutes() < 9 should be this.getMinutes() < 10 – Protrusile
B
5

function pad(num) {return ("0" + num).slice(-2);}
function time1() {
  var today = new Date(),
    h = today.getHours(),
    m = today.getMinutes(),
    s = today.getSeconds();
    
  h = h % 12;
  h = h ? h : 12; // the hour '0' should be '12'
  clk.innerHTML = h + ':' + 
    pad(m) + ':' + 
    pad(s) + ' ' + 
    (h >= 12 ? 'PM' : 'AM');
}
window.onload = function() {
  var clk = document.getElementById('clk');
  t = setInterval(time1, 500);
}
<span id="clk"></span>
Brandnew answered 12/9, 2013 at 11:34 Comment(0)
D
5

Keep it simple and clean

var d = new Date();
var n = d.toLocaleString();

https://jsfiddle.net/rinu6200/3dkdxaad/#base

Denazify answered 29/10, 2015 at 5:47 Comment(2)
This wont work as the behaviour of toLocaleString() is OS specific so you cant guarantee that it will work the same for all your users. For e.g .toLocaleTimeString('en-US', {hour: '2-digit', minute:'2-digit'} should display date like this 9:00 AM but on iOS Safari it looks like this 9:00:00 AM AEST – Hygroscopic
Then user has to fix his locale settings. If I live in Chicago and I noticed my locale setting is in California, I'll definitely fix my computer or operating systems local settings. I would definitely not waste the time making some magical code in Javascript. I would just use toLocaleString() method and be done. – Lifesaving
T
3

jQuery doesn't have any Date utilities at all. If you don't use any additional libraries, the usual way is to create a JavaScript Date object and then extract the data from it and format it yourself.

For creating the Date object you can either make sure that your date string in the JSON is in a form that Date understands, which is IETF standard (which is basically RFC 822 section 5). So if you have the chance to change your JSON, that would be easiest. (EDIT: Your format may actually work the way it is.)

If you can't change your JSON, then you'll need to parse the string yourself and get day, mouth, year, hours, minutes and seconds as integers and create the Date object with that.

Once you have your Date object you'll need to extract the data you need and format it:

   var myDate = new Date("4 Feb 2011, 19:00:00");
   var hours = myDate.getHours();
   var am = true;
   if (hours > 12) {
      am = false;
      hours -= 12;
   } else (hours == 12) {
      am = false;
   } else (hours == 0) {
      hours = 12;
   }
   
   var minutes = myDate.getMinutes();
   alert("It is " + hours + " " + (am ? "a.m." : "p.m.") + " and " + minutes + " minutes".);
Trenton answered 4/2, 2011 at 14:4 Comment(0)
S
3

1) "Squared" instructions for making 24-hours became 12-hours:

var hours24 = new Date().getHours(); // retrieve current hours (in 24 mode)
var dayMode = hours24 < 12 ? "am" : "pm"; // if it's less than 12 then "am"
var hours12 = hours24 <= 12 ? (hours24 == 0 ? 12 : hours24) : hours24 - 12;
// "0" in 24-mode now becames "12 am" in 12-mode – thanks to user @Cristian
document.write(hours12 + " " + dayMode); // printing out the result of code

2) In a single line (same result with slightly different algorythm):

var str12 = (h24 = new Date().getHours()) && (h24 - ((h24 == 0)? -12 : (h24 <= 12)? 0 : 12)) + (h24 < 12 ? " am" : " pm");

Both options return string, like "5 pm" or "10 am" etc.

Steepen answered 10/4, 2015 at 22:25 Comment(5)
hi Dmitry Parzhitsky Could you plz provide fiddle for this ? – Clarissa
How about when hours24 is 0? Then hours12 becomes 0 as well and that does not exists in AM/PM mode. It's only 1 to 12 allowed! – Pothead
var hours12 = hours24 <= 12 ? (hours24 == 0 ? 12 : hours24) : hours24 - 12; – Pothead
@Cristian: Here in Ukraine we never use am/pm, so I'm not fully familiar with this mode. Такі справи. Try to provide your edit. – Steepen
AM/PM allows only for hours from 1-12. So 00:00:00 is 12:00:00AM, while 12:00:00 (military) is 12:00:00PM, 23:00:00 is 11:00:00PM. In other words a new day starts with 12AM to 11AM, then it's 12PM and goes to 11PM. – Pothead
T
2

You can take a look at this. One of the examples says:

var d = new Date(dateString);

Once you have Date object you can fairly easy play with it. You can either call toLocaleDateString, toLocaleTimeString or you can test if getHours is bigger than 12 and then just calculate AM/PM time.

Thaddeusthaddus answered 4/2, 2011 at 14:0 Comment(0)
D
2
date = date.replace(/[0-9]{1,2}(:[0-9]{2}){2}/, function (time) {
    var hms = time.split(':'),
        h = +hms[0],
        suffix = (h < 12) ? 'am' : 'pm';
    hms[0] = h % 12 || 12;        
    return hms.join(':') + suffix
});

edit: I forgot to deal with 12 o'clock am/pm. Fixed.

Deloris answered 4/2, 2011 at 14:6 Comment(2)
Love how condensed this is! What is the best way to remove the seconds? – Md
To remove seconds, insert time = time.replace(/.{3}$/, ''); after line one. Please note that this piece of code is so condensed because it doesn't actually parse the time, but assumes that the input contains a substring of the form hh:mm:ss that actually represents a valid time. – Deloris
P
2
var dt = new Date();
    var h =  dt.getHours(), m = dt.getMinutes();
    var thistime = (h > 12) ? (h-12 + ':' + m +' PM') : (h + ':' + m +' AM');
console.log(thistime);

Here is the Demo

Pantia answered 4/9, 2015 at 10:44 Comment(1)
Need to add 'if (h == 12) h = 24;' so that it returns correctly 12:00 PM instead of AM for 12:00 noon – Auxesis
S
1
 function GetTime(date) {
        var currentTime = (new Date(date))
        var hours = currentTime.getHours()
        //Note: before converting into 12 hour format
        var suffix = '';
        if (hours > 11) {
            suffix += "PM";
        } else {
            suffix += "AM";
        }
        var minutes = currentTime.getMinutes()
        if (minutes < 10) {
            minutes = "0" + minutes
        }
        if (hours > 12) {
            hours -= 12;
        } else if (hours === 0) {
            hours = 12;
        }
        var time = hours + ":" + minutes + " " + suffix;
        return time;
    }
Sad answered 25/11, 2012 at 9:43 Comment(0)
G
1

Please try with below code

var s = "15 Feb 2015 11.30 a.m";
        var times = s.match("((([0-9])|([0-2][0-9])).([0-9][0-9])[\t ]?((a.m|p.m)|(A.M|P.M)))");            
        var time = "";

        if(times != null){                          
            var hour = times[2];
            if((times[6] == "p.m" || times[6] == "P.M")){
                if(hour < 12){
                    hour = parseInt(hour) + parseInt(12);
                }else if(hour == 12){
                    hour = "00";
                }
            }
            time = [hour, times[5], "00"].join(":");

        }

Thanks

Gena answered 23/5, 2014 at 9:14 Comment(0)
C
1

This worked for me!

function main() {
  var time = readLine();
  var formattedTime = time.replace('AM', ' AM').replace('PM', ' PM');
  var separators = [':', ' M'];
  var hms = formattedTime.split(new RegExp('[' + separators.join('') + ']'));
  if (parseInt(hms[0]) < 12 && hms[3] == 'P')
      hms[0] = parseInt(hms[0]) + 12;
  else if (parseInt(hms[0]) == 12 && hms[3] == 'A')
      hms[0] = '00';
  console.log(hms[0] + ':' + hms[1] + ':' + hms[2]);

}
Corenecoreopsis answered 11/1, 2016 at 22:42 Comment(0)
M
1

You could try this more generic function:

function to12HourFormat(date = (new Date)) {
  return {
    hours: ((date.getHours() + 11) % 12 + 1),
    minutes: date.getMinutes(),
    meridian: (date.getHours() >= 12) ? 'PM' : 'AM',
  };
}

Returns a flexible object format.

https://jsbin.com/vexejanovo/edit

Managua answered 9/12, 2016 at 2:13 Comment(0)
T
1

I'm a relative newbie, but here's what I came up with for one of my own projects, and it seems to work. There may be simpler ways to do it.

function getTime() {
    var nowTimeDate = new Date();
    var nowHour = nowTimeDate.getHours();
    var nowMinutes = nowTimeDate.getMinutes();
    var suffix = nowHour >= 12 ? "pm" : "am";
    nowHour = (suffix == "pm" & (nowHour > 12 & nowHour < 24)) ? (nowHour - 12) : nowHour;
    nowHour = nowHour == 0 ? 12 : nowHour;
    nowMinutes = nowMinutes < 10 ? "0" + nowMinutes : nowMinutes;
    var currentTime = nowHour + ":" + nowMinutes + suffix;
    document.getElementById("currentTime").innerHTML = currentTime;
}
Templeton answered 27/2, 2017 at 20:54 Comment(0)
F
1

this is your html code where you are calling function to convert 24 hour time format to 12 hour with am/pm 

<pre id="tests" onClick="tConvert('18:00:00')">
  test on click 18:00:00
</pre>
<span id="rzlt"></span>

now in js code write this tConvert function as it is 

 function tConvert (time)
  {
     
   // Check correct time format and split into components
   time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) 
    { // If time format correct
        
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    //return time; // return adjusted time or original string
      var tel = document.getElementById ('rzlt');
      
      tel.innerHTML= time.join ('');
  }

converting 18:00:00 to 6:00:00PM working for me

Fidelia answered 15/4, 2017 at 9:5 Comment(0)
C
1

This function will convert in both directions: 12 to 24 hour or 24 to 12 hour

function toggle24hr(time, onoff){
    if(onoff==undefined) onoff = isNaN(time.replace(':',''))//auto-detect format
    var pm = time.toString().toLowerCase().indexOf('pm')>-1 //check if 'pm' exists in the time string
    time = time.toString().toLowerCase().replace(/[ap]m/,'').split(':') //convert time to an array of numbers
    time[0] = Number(time[0])
    if(onoff){//convert to 24 hour:
        if((pm && time[0]!=12)) time[0] += 12
        else if(!pm && time[0]==12) time[0] = '00'  //handle midnight
        if(String(time[0]).length==1) time[0] = '0'+time[0] //add leading zeros if needed
    }else{ //convert to 12 hour:
        pm = time[0]>=12
        if(!time[0]) time[0]=12 //handle midnight
        else if(pm && time[0]!=12) time[0] -= 12
    }
    return onoff ? time.join(':') : time.join(':')+(pm ? 'pm' : 'am')
}

Here's some examples:

//convert to 24 hour:
toggle24hr('12:00am')   //returns 00:00
toggle24hr('2:00pm')    //returns 14:00
toggle24hr('8:00am')    //returns 08:00
toggle24hr('12:00pm')   //returns 12:00

//convert to 12 hour:
toggle24hr('14:00')    //returns 2:00pm
toggle24hr('08:00')    //returns 8:00am
toggle24hr('12:00')    //returns 12:00pm
toggle24hr('00:00')    //returns 12:00am

//you can also force a specific format like this:
toggle24hr('14:00',1)    //returns 14:00
toggle24hr('14:00',0)    //returns 2:00pm
Czardom answered 22/3, 2019 at 17:49 Comment(0)
D
0

Here you go

var myDate = new Date("February 04, 2011 19:00:00");
var hr = myDate.getHours(); 
var convHrs = "";
var ampmSwitch = "";
ampmSwitch = (hr > 12)? "PM":"AM"; 
convHrs = (hr >12)? hr-12:hr;
// Build back the Date / time using getMonth/ getFullYear and getDate and other functions on the myDate object. Enclose it inside a func and there you got the working 12 hrs converter ;)

And here's the converter func for yas ;) Happy coding!!

function convertTo12Hrs(yourDateTime){
    var myDate = new Date(yourDateTime);
    var dtObject = new Object();
    var monthsCollection = {0:"January", 1:"February",2:"March",3:"April",4:"May",5:"June",6:"July",7:"August",8:"September",9:"October",10:"November",11:"December"};
    dtObject.year = myDate.getFullYear();
    dtObject.month = monthsCollection[myDate.getMonth()];
    dtObject.day = (myDate.getDate()<10)?"0"+myDate.getDate():myDate.getDate();
    dtObject.minutes = (myDate.getMinutes() < 10)? "0"+myDate.getMinutes():myDate.getMinutes();
    dtObject.seconds = (myDate.getSeconds() < 10)? "0"+myDate.getSeconds():myDate.getSeconds();
    // Check if hours are greater than 12? Its PM
    dtObject.ampmSwitch = (myDate.getHours() > 12)? "PM":"AM";
    // Convert the hours
    dtObject.hour = (myDate.getHours() > 12)?myDate.getHours()-12:myDate.getHours();
    // Add the 0 as prefix if its less than 10
    dtObject.hour = (dtObject.hour < 10)? "0"+dtObject.hour:dtObject.hour;

    // Format back the string as it was or return the dtObject object or however you like. I am returning the object here
    return dtObject;
}

invoke it like convertTo12Hrs("February 04, 2011 19:00:00"); it will return you the object, which in turn you can use to format back your datetime string as you fancy...

Dulin answered 31/3, 2012 at 7:29 Comment(0)
J
0

You're going to end up doing alot of string manipulation anyway, so why not just manipulate the date string itself?

Browsers format the date string differently.

Netscape ::: Fri May 11 2012 20:15:49 GMT-0600 (Mountain Daylight Time)

IE ::: Fri May 11 20:17:33 MDT 2012

so you'll have to check for that.

var D = new Date().toString().split(' ')[(document.all)?3:4];

That will set D equal to the 24-hour HH:MM:SS string. Split that on the colons, and the first element will be the hours.

var H = new Date().toString().split(' ')[(document.all)?3:4].split(':')[0];

You can convert 24-hour hours into 12-hour hours, but that hasn't actually been mentioned here. Probably because it's fairly CRAZY what you're actually doing mathematically when you convert hours from clocks. In fact, what you're doing is adding 23, mod'ing that by 12, and adding 1

twelveHour = ((twentyfourHour+23)%12)+1;

So, for example, you could grab the whole time from the date string, mod the hours, and display all that with the new hours.

var T = new Date().toString().split(' ')[(document.all)?3:4].split(':');
T[0] = (((T[0])+23)%12)+1;
alert(T.join(':'));

With some smart regex, you can probably pull the hours off the HH:MM:SS part of the date string, and mod them all in the same line. It would be a ridiculous line because the backreference $1 couldn't be used in calculations without putting a function in the replace.

Here's how that would look:

var T = new Date().toString().split(' ')[(document.all)?3:4].replace(/(^\d\d)/,function(){return ((parseInt(RegExp.$1)+23)%12)+1} );

Which, as I say, is ridiculous. If you're using a library that CAN perform calculations on backreferences, the line becomes:

var T = new Date().toString().split(' ')[(document.all)?3:4].replace(/(^\d\d)/, (($1+23)%12)+1);

And that's not actually out of the question as useable code, if you document it well. That line says:

Make a Date string, break it up on the spaces, get the browser-apropos part, and replace the first two-digit-number with that number mod'ed.

Point of the story is, the way to convert 24-hour-clock hours to 12-hour-clock hours is a non-obvious mathematical calculation:

You add 23, mod by 12, then add one more.

Joashus answered 12/5, 2012 at 3:23 Comment(2)
Actually, you can just hour MOD 12 to convert from 24 hour to 12 hour. You don't have to add 23, mod, then add one... Because in the end you are doing the same thing as just modding by 12. – Antibiotic
@justnS That works for all but 12:00. If you mod 12 (noon) by 12, you get 0 (midnight). – Smail
D
0

Here is a nice little function that worked for me.

function getDisplayDatetime() {
    var d = new Date(); var hh = d.getHours(); var mm = d.getMinutes(); var dd = "AM"; var h = hh;

    if (mm.toString().length == 1) {
        mm = "0" + mm;
    }

    if (h >= 12) {
        h = hh - 12;
        dd = "PM";
    }

    if (h == 0) {
        h = 12;
    }
    var Datetime = "Datetime: " + d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getUTCDate() + " " + h + ":" + mm;
    return Datetime + " " + dd;
}
Differential answered 19/3, 2013 at 11:21 Comment(0)
L
0

I noticed there is already an answer, but I wanted to share my own solution, using pure JavaScript:

function curTime(pm) {
  var dt = new Date();
  var hr = dt.getHours(), min = dt.getMinutes(), sec = dt.getSeconds();
  var time = (pm ? ((hr+11)%12+1) : (hr<10?'0':'')+hr)+":"+(min<10?'0':'')+min+":"+(sec<10?'0':'')+sec+(pm ? (hr>12 ? " PM" : " AM") : ""); 
  return time;
}

You can see it in action at https://jsfiddle.net/j2xk312m/3/ using the following code block:

(function() {

  function curTime(pm) {
    var dt = new Date();
    var hr = dt.getHours(), min = dt.getMinutes(), sec = dt.getSeconds();
    var time = (pm ? ((hr+11)%12+1) : (hr<10?'0':'')+hr)+":"+(min<10?'0':'')+min+":"+(sec<10?'0':'')+sec+(pm ? (hr>12 ? " PM" : " AM") : ""); 
    return time;
  }

  alert("12-hour Format:    "+curTime(true)+"\n24-hour Format:    "+curTime(false));

})();
Longdrawnout answered 3/12, 2016 at 20:44 Comment(0)
A
0

This way you have more control over the output - i.e - if you wanted the time format to be '4:30 pm' instead of '04:30 P.M.' - you can convert to whatever format you decide you want - and change it later too. Instead of being constrained to some old method that does not allow any flexibility.

and you only need to convert the first 2 digits as the minute and seconds digits are the same in 24 hour time or 12 hour time.

var my_time_conversion_arr = {'01':"01", '02':"02", '03':"03", '04':"04", '05':"05", '06':"06", '07':"07", '08':"08", '09':"09", '10':"10", '11':"11", '12': "12", '13': "1", '14': "2", '15': "3", '16': "4", '17': "5", '18': "6", '19': "7", '20': "8", '21': "9", '22': "10", '23': "11", '00':"12"};

                var AM_or_PM = "";
                var twenty_four_hour_time = "16:30";
                var twenty_four_hour_time_arr = twenty_four_hour_time.split(":");
                var twenty_four_hour_time_first_two_digits = twenty_four_hour_time_arr[0];

                var first_two_twelve_hour_digits_converted = my_time_conversion_arr[twenty_four_hour_time_first_two_digits];

                var time_strng_to_nmbr = parseInt(twenty_four_hour_time_first_two_digits);
                if(time_strng_to_nmbr >12){
                    //alert("GREATER THAN 12");
                    AM_or_PM = "pm";
                }else{
                    AM_or_PM = "am";
                }

                var twelve_hour_time_conversion = first_two_twelve_hour_digits_converted+":"+twenty_four_hour_time_arr[1]+" "+AM_or_PM;
Aikido answered 12/10, 2019 at 22:5 Comment(0)
P
0

Ideal simplistic answer in JavaScript, excluding seconds.

   var h = 23   // Hour (Enter This)
   var min = 55  // Minutes (Enter This)
   var meridian = "AM"  // AM or PM

  if (h >= 12) {
    h = h - 12;
    meridian = "PM";
  }
  if (h == 0) {
    h = 12;
  }

  document.write(h + ":" + min + " " + meridian)
  // Returns 12:55 PM
Potsherd answered 5/1 at 7:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.