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

Question

What is the best way to convert the following JSON returned value from a 24-hour format to 12-hour format w  AM  amp  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

User · Answer

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

_x000D_

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

_x000D_

timeString will be set to:

8:00 AM

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

User · Answer

UPDATE 2  without seconds option  UPDATE  AM after noon corrected  tested  http   jsfiddle net aorcsik xbtjE   I created this function to do this    x000D   x000D  function formatDate date    x000D    var d   new Date date   x000D    var hh   d getHours    x000D    var m   d getMinutes    x000D    var s   d getSeconds    x000D    var dd    AM   x000D    var h   hh  x000D    if  h  gt   12    x000D      h   hh - 12  x000D      dd    PM   x000D      x000D    if  h    0    x000D      h   12  x000D      x000D    m   m  lt  10    0    m   m  x000D   x000D    s   s  lt  10    0    s   s  x000D   x000D       if you want 2 digit hours  x000D    h   h lt 10  0  h h     x000D   x000D    var pattern   new RegExp  0     hh         m         s   x000D   x000D    var replacement   h         m  x000D       if you want to add seconds x000D    replacement        s      x000D    replacement          dd  x000D   x000D    return date replace pattern  replacement   x000D    x000D   x000D  alert formatDate  February 04  2011 12 00 00     x000D   x000D   x000D

User · Answer

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  lt  12                       hour   parseInt hour    parseInt 12                    else if hour    12                       hour    00                                               time    hour  times 5    00   join                    Thanks

User · Answer

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

User · Answer

var dt   new Date        var h    dt getHours    m   dt getMinutes        var thistime    h  gt  12     h-12         m    PM      h         m    AM    console log thistime     Here is the Demo

User · Answer

this is your html code where you are calling function to convert 24 hour time format to 12 hour with am pm    x000D   x000D   lt pre id  tests  onClick  tConvert  18 00 00    gt  x000D    test on click 18 00 00 x000D   lt  pre gt  x000D   lt span id  rzlt  gt  lt  span gt  x000D   x000D   x000D    now in js code write this tConvert function as it is    x000D   x000D   function tConvert  time  x000D      x000D        x000D        Check correct time format and split into components x000D     time   time toString    match      01  d 2 0-3       0-5  d    0-5  d          time   x000D   x000D      if  time length  gt  1   x000D           If time format correct x000D           x000D        time   time slice  1       Remove full string match value x000D        time 5     time 0   lt  12    AM     PM      Set AM PM x000D        time 0     time 0    12    12     Adjust hours x000D        x000D        return time     return adjusted time or original string x000D        var tel   document getElementById   rzlt    x000D         x000D        tel innerHTML  time join       x000D      x000D   x000D   x000D    converting 18 00 00 to 6 00 00PM working for me

User · Answer

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    lt  10    0          this getMinutes        var ampm   this getHours    lt  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

User · Answer

x000D   x000D  function pad num   return   0    num  slice -2    x000D  function time1     x000D    var today   new Date    x000D      h   today getHours    x000D      m   today getMinutes    x000D      s   today getSeconds    x000D       x000D    h   h   12  x000D    h   h   h   12     the hour  0  should be  12  x000D    clk innerHTML   h          x000D      pad m           x000D      pad s           x000D       h  gt   12    PM     AM    x000D    x000D  window onload   function     x000D    var clk   document getElementById  clk    x000D    t   setInterval time1  500   x000D    x000D   lt span id  clk  gt  lt  span gt  x000D   x000D   x000D

User · Answer

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   gt -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  amp  amp  time 0   12   time 0     12         else if  pm  amp  amp  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  gt  12         if  time 0   time 0  12   handle midnight         else if pm  amp  amp  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

User · Answer

function GetTime date            var currentTime    new Date date           var hours   currentTime getHours             Note  before converting into 12 hour format         var suffix               if  hours  gt  11                suffix     PM             else               suffix     AM                     var minutes   currentTime getMinutes           if  minutes  lt  10                minutes    0    minutes                   if  hours  gt  12                hours -  12            else if  hours     0                hours   12                    var time   hours         minutes         suffix          return time

User · Answer

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

User · Answer

it is pm if hours from 12 onwards     suffix    hours  gt   12    pm     am          only -12 from hours if it is greater than 12  if not back at mid night      hours    hours  gt  12   hours -12   hours         if 00 then it is 12 am     hours    hours     00    12   hours

User · Answer

1   Squared  instructions for making 24-hours became 12-hours   var hours24   new Date   getHours       retrieve current hours  in 24 mode  var dayMode   hours24  lt  12    am     pm      if it s less than 12 then  am  var hours12   hours24  lt   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     amp  amp   h24 -   h24    0   -12    h24  lt   12   0   12      h24  lt  12     am      pm      Both options return string  like  5 pm  or  10 am  etc

User · Answer

Keep it simple and clean  var d   new Date    var n   d toLocaleString      https   jsfiddle net rinu6200 3dkdxaad  base

User · Answer

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  gt   12    pm     am       nowHour    suffix     pm   amp   nowHour  gt  12  amp  nowHour  lt  24      nowHour - 12    nowHour      nowHour   nowHour    0   12   nowHour      nowMinutes   nowMinutes  lt  10    0    nowMinutes   nowMinutes      var currentTime   nowHour         nowMinutes   suffix      document getElementById  currentTime   innerHTML   currentTime

User · Answer

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    lt  12  amp  amp  hms 3      P         hms 0    parseInt hms 0     12    else if  parseInt hms 0      12  amp  amp  hms 3      A         hms 0     00     console log hms 0          hms 1          hms 2

User · Answer

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    gt   12     PM     AM            Returns a flexible object format   https   jsbin com vexejanovo edit

User · Answer

Here you go  var myDate   new Date  February 04  2011 19 00 00    var hr   myDate getHours     var convHrs       var ampmSwitch       ampmSwitch    hr  gt  12    PM   AM    convHrs    hr  gt 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   lt 10   0  myDate getDate   myDate getDate        dtObject minutes    myDate getMinutes    lt  10    0  myDate getMinutes   myDate getMinutes        dtObject seconds    myDate getSeconds    lt  10    0  myDate getSeconds   myDate getSeconds           Check if hours are greater than 12  Its PM     dtObject ampmSwitch    myDate getHours    gt  12    PM   AM          Convert the hours     dtObject hour    myDate getHours    gt  12  myDate getHours  -12 myDate getHours           Add the 0 as prefix if its less than 10     dtObject hour    dtObject hour  lt  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

User · Answer

This is how you can change hours without if statement   hours     hours   11    12   1

User · Answer

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

User · Answer

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

User · Answer

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 lt 10  0      hr       min lt 10  0      min      sec lt 10  0      sec  pm    hr gt 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 lt 10  0      hr       min lt 10  0      min      sec lt 10  0      sec  pm    hr gt 12     PM      AM               return time         alert  12-hour Format       curTime true    n24-hour Format       curTime false

User · Answer

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   quot 01 quot    02   quot 02 quot    03   quot 03 quot    04   quot 04 quot    05   quot 05 quot    06   quot 06 quot    07   quot 07 quot    08   quot 08 quot    09   quot 09 quot    10   quot 10 quot    11   quot 11 quot    12    quot 12 quot    13    quot 1 quot    14    quot 2 quot    15    quot 3 quot    16    quot 4 quot    17    quot 5 quot    18    quot 6 quot    19    quot 7 quot    20    quot 8 quot    21    quot 9 quot    22    quot 10 quot    23    quot 11 quot    00   quot 12 quot                     var AM or PM    quot  quot                   var twenty four hour time    quot 16 30 quot                   var twenty four hour time arr   twenty four hour time split  quot   quot                    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  gt 12                         alert  quot GREATER THAN 12 quot                        AM or PM    quot pm quot                    else                      AM or PM    quot am quot                                      var twelve hour time conversion   first two twelve hour digits converted  quot   quot  twenty four hour time arr 1   quot   quot  AM or PM

User · Answer

date   date replace   0-9  1 2    0-9  2   2    function  time        var hms   time split               h    hms 0           suffix    h  lt  12     am     pm       hms 0    h   12    12              return hms join        suffix       edit  I forgot to deal with 12 o clock am pm  Fixed

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

Examples related to javascript

Examples related to datetime

Examples related to time

Examples related to formatting