jQuery clock 12/24 hour together - javascript

I meant to have two clocks, one for 24-hour format, and the other is 12-hour format,
function updateClock() {
var currentTime = new Date();
var currentHoursAP = currentTime.getHours();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHoursAP = (currentHours > 12) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHoursAP = (currentHours == 0) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + " / " + currentHoursAP + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
$("#clock").html(currentTimeString);
}
$(document).ready(function () {
setInterval(updateClock, 1000);
});
but end up to currentHours and currentHoursAP become exact same value.
What do I missed?

The problem was
// Convert an hours component of "0" to "12"
currentHoursAP = (currentHoursAP == 0) ? 12 : currentHoursAP;
if currentHoursAP != 0 then instead of setting back the value of currentHoursAP you were setting it back to currentHours
Demo: Fiddle

getHours is zero-based (0 = 12 AM, 23 = 11 PM), so you need to adjust the check:
currentHoursAP = (currentHours >= 12) ? currentHours - 12 : currentHours;
currentHoursAP = (currentHoursAP == 0) ? 12 : currentHoursAP;

Related

How to set Am and Pm for Clock [duplicate]

I have buttons with the names of big cities.
Clicking them, I want to get local time in them.
$('#btnToronto').click(function () {
var hours = new Date().getHours();
var hours = hours-2; //this is the distance from my local time
alert ('Toronto time: ' + hours + ' h'); //this works correctly
});
But how can I get AM or PM ?
You should just be able to check if hours is greater than 12.
var ampm = (hours >= 12) ? "PM" : "AM";
But have you considered the case where the hour is less than 2 before you subtract 2? You'd end up with a negative number for your hour.
Try below code:
$('#btnToronto').click(function () {
var hours = new Date().getHours();
var hours = (hours+24-2)%24;
var mid='am';
if(hours==0){ //At 00 hours we need to show 12 am
hours=12;
}
else if(hours>12)
{
hours=hours%12;
mid='pm';
}
alert ('Toronto time: ' + hours + mid);
});
You can use like this,
var dt = new Date();
var h = dt.getHours(), m = dt.getMinutes();
var _time = (h > 12) ? (h-12 + ':' + m +' PM') : (h + ':' + m +' AM');
Hopes this will be better with minutes too.
const now = new Date()
.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })
.toLowerCase();
Basically you just need to put {hour12: true} and it's done.
result => now = "21:00 pm";
If hours is less than 12, it's the a.m..
var hours = new Date().getHours(), // this is local hours, may want getUTCHours()
am;
// adjust for timezone
hours = (hours + 24 - 2) % 24;
// get am/pm
am = hours < 12 ? 'a.m.' : 'p.m.';
// convert to 12-hour style
hours = (hours % 12) || 12;
Now, for me as you didn't use getUTCHours, it is currently 2 hours after
hours + ' ' + am; // "6 p.m."
very interesting post. in a function that take a date in parameter it can appear like that :
function hourwithAMPM(dateInput) {
var d = new Date(dateInput);
var ampm = (d.getHours() >= 12) ? "PM" : "AM";
var hours = (d.getHours() >= 12) ? d.getHours()-12 : d.getHours();
return hours+' : '+d.getMinutes()+' '+ampm;
}
with date.js
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
you can write like this
new Date().toString("hh:mm tt")
cheet sheet is here format specifiers
tt is for AM/PM
Try this:
h = h > 12 ? h-12 +'PM' : h +'AM';
The best way without extensions and complex coding:
date.toLocaleString([], { hour12: true});
How do you display javascript datetime in 12 hour AM/PM format?
here is get time i use in my code
let current = new Date();
let cDate = current.getDate() + '-' + (current.getMonth() + 1) + '-' + current.getFullYear();
let hours = current.getHours();
let am_pm = (hours >= 12) ? "PM" : "AM";
if(hours >= 12){
hours -=12;
}
let cTime = hours + ":" + current.getMinutes() + ":" + current.getSeconds() +" "+ am_pm;
let dateTime = cDate + ' ' + cTime;
console.log(dateTime); // 1-3-2021 2:28:14 PM
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
var timewithampm = hours + ':' + minutes + ' ' + ampm;
return timewithampm;
var dt = new Date();
var h = dt.getHours(),
m = dt.getMinutes();
var time;
if (h == 12) {
time = h + ":" + m + " PM";
} else {
time = h > 12 ? h - 12 + ":" + m + " PM" : h + ":" + m + " AM";
}
//var time = h > 12 ? h - 12 + ":" + m + " PM" : h + ":" + m + " AM";
console.log(`CURRENT TIME IS ${time}`);
This will work for everytime,
function Timer() {
var dt = new Date()
if (dt.getHours() >= 12){
ampm = "PM";
} else {
ampm = "AM";
}
if (dt.getHours() < 10) {
hour = "0" + dt.getHours();
} else {
hour = dt.getHours();
}
if (dt.getMinutes() < 10) {
minute = "0" + dt.getMinutes();
} else {
minute = dt.getMinutes();
}
if (dt.getSeconds() < 10) {
second = "0" + dt.getSeconds();
} else {
second = dt.getSeconds();
}
if (dt.getHours() > 12) {
hour = dt.getHours() - 12;
} else {
hour = dt.getHours();
}
if (hour < 10) {
hour = "0" + hour;
} else {
hour = hour;
}
document.getElementById('time').innerHTML = hour + ":" + minute + ":" + second + " " + ampm;
setTimeout("Timer()", 1000);
}
Timer()
<div id="time"></div>

I want to subtract 8 hours from current time. If I try to subtract 8 from hours, it goes in negative

I am using UTC time and want to subtract 8 hours from the current time. I am using JavaScript.
function getUTCStartDate(time) {
var d = new Date();
var year = d.getUTCFullYear();
var month = (d.getUTCMonth() + 1);
var date = d.getUTCDate();
var hours = d.getUTCHours();
var hoursMinusTime = (d.getUTCHours() - time);
var minutes = d.getUTCMinutes();
var seconds = d.getUTCSeconds();
var millisec = d.getUTCMilliseconds();
date = date.toString().length > 1 ? date : '0' + date;
month = month.toString().length > 1 ? month : '0' + month;
hoursMinusTime = hoursMinusTime.toString().length > 1 ? hoursMinusTime : '0' + hoursMinusTime;
minutes = minutes.toString().length > 1 ? minutes : '0' + minutes;
seconds = seconds.toString().length > 1 ? seconds : '0' + seconds;
millisec = millisec.toString().length > 1 ? millisec : '0' + millisec;
return year + "-" + month + "-" + date + "T" + hoursMinusTime + ":" + minutes + ":" + seconds + "." + millisec + "Z";
}
I did it in a different way. Converted the time in unix time deducted 8 hours from it.
var currTime = new Date();
var d = new Date(currTime.getTime() - (time * 3600000));
var hours = d.getUTCHours();

Get HTML5 datetime-local exact value

Try to use this, http://jsfiddle.net/mdg2u4ut and you will notice the hour will be different with what you've set, like in my case
I think it's because of the timezone problem.
I can just hardcoded -8 for the hour variable in my case but that's not the smart way of doing it.
<input type="datetime-local" onblur="formatDate(this.value)" />
<p id="para"></p>
my JS
function formatDate(date) {
if(date){
date = new Date(date);
var hours = date.getHours();
var minutes = date.getMinutes();
var format = hours < 12 ? 'AM' : 'PM';
hours = hours % 12;
hours = hours ? hours : 12; // making 0 a 12
minutes = minutes < 10 ? '0'+minutes : minutes;
var time = hours + ':' + minutes + ' ' + format;
var output = date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear() + " " + time;
document.querySelector('#para').innerHTML = output;
}
}
Use getUTC methods instead. jsFiddle
var hours = date.getUTCHours();
var minutes = date.getUTCMinutes();
var format = hours < 12 ? 'AM' : 'PM';
hours = hours % 12;
hours = hours ? hours : 12; // making 0 a 12
minutes = minutes < 10 ? '0'+minutes : minutes;
var time = hours + ':' + minutes + ' ' + format;
var output = date.getUTCMonth()+1 + "/" + date.getUTCDate() + "/" + date.getUTCFullYear() + " " + time;

24 hours format hrs and min with leading zeros

Looking for 24 hours format, hours + min string
for ex :
2:05 AM => 0205 ( need to add leading zero)
4:30 PM => 1030
hours & min should be 4 digit always, thanks for your help.
created below logic..
var d = new Date();
var sHours = d.getHours();
var sMinutes = d.getMinutes();
if (sHours < 10) sHours = "0" + sHours;
if (sMinutes < 10) sMinutes = "0" + sMinutes;
var seq_no = sHours + "" + sMinutes;

Get the day name and time on posting automatically using JavaScript

This will result in a javascript format: 9 Aug, 2012
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split(-)[2].substring(0,2);
var m = postdate.split(-)[1];
var y = postdate.split(-)[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ', ' + y ;
How to add the day name and time in javascript above?
Ex: Thursday, 9 Aug, 2012 5:28 PM
getDay(); will return the dayname
getTime() will return the time in milliscond since 1970.
You can get the day name using gatDay();
and here is a function to display time.
function displayTime() {
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = (currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = (currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = (currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = (currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + " " +currentSeconds+" "+ timeOfDay;
$("#clock").html(currentTimeString);
}

Categories

Resources