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

Question

How do you display a JavaScript datetime object in the 12 hour format  AM PM

User · Answer

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

https://momentjs.com/docs/#/displaying/format/

_x000D_

console.log(moment().format('hh:mm a'));

_x000D_

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

_x000D_

User · Answer

If you just want to show the hours then     x000D   x000D  var time   new Date    x000D  console log  x000D    time toLocaleString  en-US     hour   numeric   hour12  true    x000D       x000D   x000D   x000D    Output   7 AM  If you wish to show the minutes as well then      x000D   x000D  var time   new Date    x000D  console log  x000D    time toLocaleString  en-US     hour   numeric   minute   numeric   hour12  true    x000D     x000D   x000D   x000D    Output   7 23 AM

User · Answer

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  x000D   x000D  const getTimeAMPMFormat    date    gt      let hours   date getHours      let minutes   date getMinutes      const ampm   hours  gt   12    PM     AM     hours   hours   12    hours   hours   hours   12     the hour  0  should be  12    hours   hours  lt  10    0    hours   hours       appending zero in the start if hours less than 10   minutes   minutes  lt  10    0    minutes   minutes    return hours         minutes         ampm     console log getTimeAMPMFormat new Date       09 59 AM x000D   x000D   x000D

User · Answer

Short RegExp for en-US   var d   new Date    d   d toLocaleTimeString   replace    d              current time  e g   1 54 PM

User · Answer

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

User · Answer

Updated for more compression const formatAMPM    date    gt      let hours   date getHours      let minutes   date getMinutes          const ampm   hours  gt   12    pm     am      hours    12    hours   hours    12        minutes   minutes  lt  10    0  minutes     minutes     const strTime      hours    minutes    ampm       return strTime      console log formatAMPM new Date

User · Answer

You can also consider using something like date js  x000D   x000D   lt html gt  x000D   lt script type  text javascript  src  http   www datejs com build date js  gt  lt  script gt  x000D   x000D   lt script gt  x000D      function    x000D       x000D        document write new Date   toString  hh mm tt     x000D           x000D   lt  script gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Here my solution  function getTime     var systemDate   new Date    var hours   systemDate getHours    var minutes   systemDate getMinutes    var strampm  if  hours  gt   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  lt  10        i    0    i   return i

User · Answer

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       lt br gt     d toLocaleTimeString           lt  script gt  lt  div gt  lt  --  time -- gt

User · Answer

Please find the solution below  var d   new Date    var amOrPm    d getHours    lt  12     AM     PM   var hour    d getHours    lt  12    d getHours     d getHours   - 12  return   d getDate             d getMonth             d getFullYear           hour         d getMinutes           amOrPm

User · Answer

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

User · Answer

x000D   x000D  function formatTime  d   new Date    ampm   true          var hour   d getHours             if   ampm                 var a     hour  gt   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  lt  10      0  t     t     document querySelector   time1   innerHTML   formatTime    document querySelector   time2   innerHTML   formatTime  new Date    false    x000D   lt p gt ampm true     lt span id  time1  gt  lt  span gt   default  lt  p gt   lt p gt ampm false    lt span id  time2  gt  lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

Here s a way using regex    x000D   x000D  console log new Date  7 10 2013 20 12 34   toLocaleTimeString   replace     d     d  2      d  2           1 3    x000D  console log new Date  7 10 2013 01 12 34   toLocaleTimeString   replace     d     d  2      d  2           1 3    x000D   x000D   x000D    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

User · Answer

x000D   x000D  var d   new Date    x000D  var hours   d getHours     12  x000D    hours   hours   hours   12  x000D      var test     Jan    Feb    Mar    Apr    May    Jun    Jul    Aug    Sep    Oct    Nov    Dec    d getMonth     1            x000D        00    d getDate    slice -2           x000D      d getFullYear            x000D        00    hours  slice -2           x000D        00    d getMinutes    slice -2           x000D        00    d getSeconds    slice -2           d getHours    gt   12    PM     AM     x000D       x000D  document getElementById  demo   innerHTML   test  x000D   lt p id  demo   gt  lt  p gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

x000D   x000D  function formatAMPM date      var hours   date getHours      var minutes   date getMinutes      var ampm   hours  gt   12    pm     am     hours   hours   12    hours   hours   hours   12     the hour  0  should be  12    minutes   minutes  lt  10    0  minutes   minutes    var strTime   hours         minutes         ampm    return strTime     console log formatAMPM new Date    x000D   x000D   x000D

User · Answer

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  gt   12    pm     am     hours   hours   12    hours   hours   hours   12    minutes   minutes  lt  10    0    minutes   minutes    var timewithampm   hours         minutes         ampm     var dateTime   monthNames parseInt month  - 1          day         year         timewithampm    return dateTime

User · Answer

lt h1 id  clock display  class  text-center  style  font-size 40px  color  ffffff  gt  CLOCK TIME DISPLAYS HERE  lt  h1 gt      lt script gt              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  lt  10                       i    0    i    add zero in front of numbers  lt  10                                   return i                                CONVERT TO 12 HOUR TIME  SET AM OR PM             function twelve hour time h                    if h  gt  12                       h   h - 12                      AM or PM     PM                                     return h                              startTime              lt  script gt

User · Answer

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

User · Answer

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  lt  12    A     P      M

User · Answer

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   lt noon getTime     am   pm

User · Answer

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  gt  12           ext    PM           hour    hour - 12           result   hour           if hour  lt  10               result    quot 0 quot    hour           else if hour    12               hour    quot 00 quot               ext    AM                       else if hour  lt  12           result     hour  lt  10     quot 0 quot    hour   hour           ext    AM        else if hour    12           ext    PM             if minutes  lt  10       minutes    quot 0 quot    minutes       result   result    quot   quot    minutes         ext     console log result    and plunker example here

User · Answer

Or just simply do the following code        lt script gt          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 gt 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 gt 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 lt 10   i    0    i       add zero in front of numbers  lt  10             return i                            lt  script gt

User · Answer

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   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D       lt p gt Click the button to display the date and time as a string  lt  p gt  x000D   x000D       lt button onclick  myFunction    gt Try it lt  button gt  x000D       lt button onclick  fullDateTime    gt Try it2 lt  button gt  x000D       lt p id  demo  gt  lt  p gt  x000D       lt p id  demo2  gt  lt  p gt  x000D       lt script gt  x000D          function myFunction     x000D              var d   new Date    x000D              var n   d toLocaleString       hour   2-digit   minute   2-digit      x000D              document getElementById  demo   innerHTML   n  x000D            x000D          function fullDateTime     x000D              var d   new Date              x000D              var n   d toLocaleString       hour12  true    x000D              document getElementById  demo2   innerHTML   n  x000D            x000D       lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    I found this checking this question out   How do I use  toLocaleTimeString   without displaying seconds

User · Answer

lt script gt  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  gt   12    PM     AM   getCurrentHours   getCurrentHours   12  getCurrentHours   getCurrentHours   getCurrentHours   12   getCurrentMinutes   getCurrentMinutes  lt  10    0  getCurrentMinutes   getCurrentMinutes  var getCurrentDateTime   getTodayDate    -    getTodayMonth    -    getTodayFullYear         getCurrentHours         getCurrentMinutes         getCurrentAmPm  alert getCurrentDateTime    lt  script gt

User · Answer

try this        var date   new Date          var hours   date getHours          var minutes   date getMinutes          var seconds   date getSeconds          var ampm   hours  gt   12    pm     am

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

Examples related to javascript

Examples related to datetime

Examples related to date

Examples related to time

Examples related to format