How do you display JavaScript datetime in 12 hour AM/PM format ?
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:

Please Login to comment...