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

JavaScript uses the 24-hour format as default for DateTime. However, daytime in JavaScript can be displayed in 12 hour AM/PM format using several approaches. We will look into a couple in this article.

Approach 1:
In this approach, we will change the DateTime format by only using native methods. Simply put, we will apply modulo “%” operator to find the hour in 12-hour format and use conditional “?:” operator to apply “AM” or “PM”.

Program:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <p>
          Click the button to change the 
          format using Native method.
      </p>
        <div id="old_time"></div>
        <script>
            // JavaScript Program to display
            // current time in 24-hour format
            var date = new Date();
            var hours = (date.getHours() < 10 ? '0' : '') + 
                date.getHours();
            var minutes = (date.getMinutes() < 10 ? '0' : '') + 
                date.getMinutes();
            
            var div = document.getElementById('old_time');
            div.innerHTML = hours + ":" + minutes;
        </script>
  
        <button onclick="myFunction()">
          Change
      </button>
        
        <p id="change"></p>
        <script>
            // JavaScript function to
            // Display 12 hour format
            function myFunction() {
                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                
                // Check whether AM or PM
                var newformat = hours >= 12 ? 'PM' : 'AM'; 
                
                // Find current hour in AM-PM Format
                hours = hours % 12; 
                
                // To display "0" as "12"
                hours = hours ? hours : 12; 
                minutes = minutes < 10 ? '0' + minutes : minutes;
                
                document.getElementById("change").innerHTML = 
                  hours + ':' + minutes + ' ' + newformat;
            }
        </script>
  </center>
</body>
  
</html>

chevron_right






                        filter_none








Before:

before


After:

after


Approach 2:

In this approach, we will utilize an inbuilt method toLocaleString() to change the format of given date into AM-PM format.


toLocaleString(): It returns a string representation of the date Object. The 2 arguments Locale and options allow for customization of the behavior of the method.


Syntax:


dateObject.toLocaleString([locales[, options]])



Program:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<body> 


    <center> 


        <h1 style="color:green">GeeksforGeeks</h1> 


        <p>Click the button to change the format.</p> 


        <div id="old_time"></div> 


        <script> 


            var date = new Date(); 


            var hours = (date.getHours() < 10 ? '0' : '') + 


                date.getHours(); 


            var minutes = (date.getMinutes() < 10 ? '0' : '') +  


                date.getMinutes(); 


            var div = document.getElementById('old_time'); 


            div.innerHTML = hours + ":" + minutes; 


        </script> 


  


        <button onclick="myFunction()"> 


          Change 


      </button> 


        


        <p id="change"></p> 


        <script> 


            var now = new Date(); 


            var hours = now.getHours(); 


  


            function myFunction() { 


                var d = new Date(); 


                var n = d.toLocaleString([], { 


                    hour: '2-digit', 


                    minute: '2-digit'


                }); 


                document.getElementById("change").innerHTML = n; 


            } 


        </script> 


  </center> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Before:

Before change


After:

After change



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
vishodushaozae
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.