How to get the current time in hh: mm AM / PM format in Javascript?
I have Javascript where I need to insert the current time in HH: MM AM / PM format. There is one catch - I need to put the time that starts in two hours, so, for example, instead of 7:23 pm, I need to put 9:23 pm, etc.
I tried to do something like: var dateFormat = new Date("hh:mm a")
but it didn't work. I also tried to use:
var today = new Date();
var time = today.toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3")
alert(time);
but all i saw was for example 18:23 instead of 6:23 pm (probably because of toLocaleTimeString () and my location in Europe) - maybe there is a uniform way to do this that will work globally ?. Also, I don't know exactly how to add 2 hours to the final result. Could you help me? Thank!
source to share
Use methods Date
to set and retrieve times and plot a timeline, something along the lines of the fragment.
[ edit ] Just for fun: added a more general approach using 2 Date.prototype
extensions.
var now = new Date();
now.setHours(now.getHours()+2);
var isPM = now.getHours() >= 12;
var isMidday = now.getHours() == 12;
var result = document.querySelector('#result');
var time = [now.getHours() - (isPM && !isMidday ? 12 : 0),
now.getMinutes(),
now.getSeconds() || '00'].join(':') +
(isPM ? ' pm' : 'am');
result.innerHTML = 'the current time plus two hours = '+ time;
// a more generic approach: extend Date
Date.prototype.addTime = addTime;
Date.prototype.showTime = showTime;
result.innerHTML += '<h4>using Date.prototype extensions</h4>';
result.innerHTML += 'the current time plus twenty minutes = '+
new Date().addTime({minutes: 20}).showTime();
result.innerHTML += '<br>the current time plus one hour and twenty minutes = '+
new Date().addTime({hours: 1, minutes: 20}).showTime();
result.innerHTML += '<br>the current time <i>minus</i> two hours (format military) = '+
new Date().addTime({hours: -2}).showTime(true);
result.innerHTML += '<br>the current time plus ten minutes (format military) = '+
new Date().addTime({minutes: 10}).showTime(true);
function addTime(values) {
for (var l in values) {
var unit = l.substr(0,1).toUpperCase() + l.substr(1);
this['set' + unit](this['get' + unit]() + values[l]);
}
return this;
}
function showTime(military) {
var zeroPad = function () {
return this < 10 ? '0' + this : this;
};
if (military) {
return [ zeroPad.call(this.getHours()),
zeroPad.call(this.getMinutes()),
zeroPad.call(this.getSeconds()) ].join(':');
}
var isPM = this.getHours() >= 12;
var isMidday = this.getHours() == 12;
return time = [ zeroPad.call(this.getHours() - (isPM && !isMidday ? 12 : 0)),
zeroPad.call(this.getMinutes()),
zeroPad.call(this.getSeconds()) ].join(':') +
(isPM ? ' pm' : ' am');
}
<div id="result"></div>
source to share
You can convert the current time to 12 hour format with a single liner
new Date().toLocaleTimeString('en-US', { hour: 'numeric', hour12: true, minute: 'numeric' });
And add two hours to the current time
Date.now() + 2 * 60 * 60 * 1000
So, you can do it in a simple line:
new Date(Date.now() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: 'numeric', hour12: true, minute: 'numeric' });
source to share
Note that the accepted answer, while good, does not fit the format requirements: HH: MM AM / PM. It returns at midnight as "0: 0: 38am" and so on.
There are many ways to do this, and one alternative is shown below. Click Run Snippet Code to test.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clock</title>
</head>
<body>
<span id="clock" style="font-family: monospace; font-size: 48px; background-color: black; color: lime; padding: 10px;">00:00:00 AM</span>
<script type="text/javascript">
function getTime( ) {
var d = new Date( );
d.setHours( d.getHours() + 2 ); // offset from local time
var h = (d.getHours() % 12) || 12; // show midnight & noon as 12
return (
( h < 10 ? '0' : '') + h +
( d.getMinutes() < 10 ? ':0' : ':') + d.getMinutes() +
// optional seconds display
// ( d.getSeconds() < 10 ? ':0' : ':') + d.getSeconds() +
( d.getHours() < 12 ? ' AM' : ' PM' )
);
}
var clock = document.getElementById('clock');
setInterval( function() { clock.innerHTML = getTime(); }, 1000 );
</script>
</body>
</html>
source to share
This should work.
var date = new Date();
var hour = date.getHours() - (date.getHours() >= 12 ? 12 : 0);
var period = date.getHours() >= 12 ? 'PM' : 'AM';
alert( hour + 2 + ':' + date.getMinutes() + ' ' +period);
source to share