Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you display JavaScript datetime in 12hour AM/PM format?
The most practical way to display datetime for efficient time analysis is in a 12 hour am/pm format. Additionally, this method clarifies the distinction between morning and evening. As an illustration, "am/pm" both specify a certain time period and make it simple to understand the time, which is not the case with the 24-hour format.
This article will explain the ways of displaying JavaScript datetime in 12hour am/pm format.
Displaying JavaScript datetime in 12hour am/pm format
Let’s dive one by one to understand more about displaying JavaScript datetime in 12hoyur am/pm format. We can extract the hours and minutes from current date time. If the hours value is greater than 12 then it will be PM, otherwise AM.
Using the toLocaleString() Method
The toLocaleString() method returns a string that represents the date in accordance with the language that is being used. The locale settings on your computer determine the default language.
Syntax
Following is the syntax for toLocaleString() −
Date.toLocaleString(locales, options)
Example
In the following example, we are creating a new date object and applying the toLocalString() method using the US language format, and the value of the time is assigned as its parameter. We used hour12 to indicate that the time should be displayed in 12-hour format.
<!DOCTYPE html>
<html>
<body>
<script>
var time = new Date();
document.write(time.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
}));
</script>
</body>
</html>
When the script is executed, it will generate an output consisting of time displayed in the 12-hour format am/pm that occurred as a result of an event triggered by the script's execution.
Example
Consider the following example, here we are creating a new date object and applying toLocalString() and taking the output in 12-hour format (am/pm) along with the full date on the webpage.
<!DOCTYPE html>
<html>
<body>
<button onclick="displaydatetime()">Click</button>
<p id="tutorial"></p>
<script>
function displaydatetime() {
var x = new Date();
var y = x.toLocaleString([], {
hour12: true
});
document.getElementById("tutorial").innerHTML = y;
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the click button on the webpage. When the user clicks the button, the event gets triggered and displays the datetime in 12-hour am/pm format on the webpage.
Example
Execute the below to get the JavaScript datetime in 12hours am/pm format.
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
const date = new Date();
document.getElementById("tutorial").innerHTML = date.toLocaleString();
</script>
</body>
</html>
When you run the above script, an output window will appear, triggering the event and displaying the datetime in 12-hour am/pm format on the webpage.
Using the inline function
This can be achieved by applying conditional operator to the datetime am/pm format.
Example
Let’s look at the following example, here we are creating an inline function named dateTimeformat() and creating a variable x and assigning the am or pm with respect to the value of hours. We are using the % operator to transform the hours to the format of 12 hours.
<!DOCTYPE html>
<html>
<body>
<script>
const dateTimeformat = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
let x = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes.toString().padStart(2, '0');
let mergeTime = hours + ':' + minutes + ' ' + x;
return mergeTime;
}
document.write(dateTimeformat(new Date()));
</script>
</body>
</html>
When the script gets executed, the event gets triggered and displays the time in the 12-hour am/pm format on the webpage.
2K+ Views
