Converting 24 hour time to 12 hour time w/ AM & PM using Javascript

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.

  • Minutes since midnight in Momentjs
  • Is JavaScript's Date object susceptible to the Y2038 problem?
  • Javascript getUTCDate return the previous day
  • Parsing datetime in python json loads
  • display date as datetime input would
  • How to display a Date object in a specific format using JavaScript?
  • Difference between two times in format (hh: mm: ss)
  • Convert Returned String (YYYYMMDD) to Date
  • Chrome not recognizing 24:00:00 while Firefox does
  • Is JavaScript's Date object susceptible to the Y2038 problem?
  • Stringify date in javascript in valid .Net format
  • How to get the exact local time of client?
  • 22 Solutions collect form web for “Converting 24 hour time to 12 hour time w/ AM & PM using Javascript”

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

    This is how you can change hours without if statement:

    hours = ((hours + 11) % 12 + 1);
    
        //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;
    

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

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

    Keep it simple and clean

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

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

    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.

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

    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.

    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.

    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

    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

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

    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…

    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.

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

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

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

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

    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

    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>