Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 30 Dec, 2022
Improve Article
Save Article

JavaScript uses the 24-hour format as the default for DateTime. However, daytime in JavaScript can be displayed at 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 the modulo “%” operator to find the hour in 12-hour format and use the conditional “?:” operator to apply “AM” or “PM”

Example::

html




<body>
    <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>
</body>

Output:

 

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: 

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>
    </center>
  
    <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>
</body>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!