Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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. This method clarifies the distinction between morning and evening, making times like "2:30 PM" more intuitive than "14:30" in 24-hour format.
This article will explain various methods for displaying JavaScript datetime in 12-hour AM/PM format.
Using the toLocaleString() Method
The toLocaleString() method returns a formatted date string according to the specified locale and options. It's the most straightforward approach for 12-hour format conversion.
Syntax
Date.toLocaleString(locales, options)
Parameters
- locales ? Language/region code (e.g., 'en-US')
-
options ? Object with formatting options like
hour12: true
Example: Time Only
Here we display only the time in 12-hour format using specific formatting options:
<!DOCTYPE html>
<html>
<body>
<p id="timeOutput"></p>
<script>
const time = new Date();
const formattedTime = time.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
document.getElementById('timeOutput').innerHTML = formattedTime;
</script>
</body>
</html>
Example: Full Date and Time
This example shows how to display the complete date and time in 12-hour format:
<!DOCTYPE html>
<html>
<body>
<button onclick="displayDateTime()">Show Current DateTime</button>
<p id="dateTimeOutput"></p>
<script>
function displayDateTime() {
const currentDate = new Date();
const formatted = currentDate.toLocaleString('en-US', {
hour12: true
});
document.getElementById("dateTimeOutput").innerHTML = formatted;
}
</script>
</body>
</html>
Example: Default Locale
Using the default system locale settings:
<!DOCTYPE html>
<html>
<body>
<p id="defaultOutput"></p>
<script>
const date = new Date();
document.getElementById("defaultOutput").innerHTML = date.toLocaleString();
</script>
</body>
</html>
Using Custom Function
For more control over formatting, you can create a custom function that manually converts 24-hour time to 12-hour format:
Example
<!DOCTYPE html>
<html>
<body>
<p id="customOutput"></p>
<script>
const formatTo12Hour = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
let period = hours >= 12 ? 'PM' : 'AM';
// Convert to 12-hour format
hours = hours % 12;
hours = hours ? hours : 12; // 0 becomes 12
// Add leading zero to minutes if needed
minutes = minutes.toString().padStart(2, '0');
return `${hours}:${minutes} ${period}`;
}
const currentTime = formatTo12Hour(new Date());
document.getElementById("customOutput").innerHTML = currentTime;
</script>
</body>
</html>
Comparison of Methods
| Method | Ease of Use | Customization | Browser Support |
|---|---|---|---|
toLocaleString() |
High | Good | Excellent |
| Custom Function | Medium | Full Control | Universal |
Conclusion
Use toLocaleString() with hour12: true for simple 12-hour formatting. For complex custom formatting requirements, implement your own conversion function using modular arithmetic.
4K+ Views
