Format JavaScript Date as Hours:Minutes:Seconds - javascript

I have this code and I cannot get the second time to format properly:
setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + local.getMinutes() + ":" + local.getSeconds();
var remote = new Date();
var remotedatetime = remote.getHours() + ":" + remote.getMinutes() + ":" + remote.getSeconds();
var remoteoffset = remote.setHours(local.getHours() - 5);
$('#local-time').html(localdatetime);
$('#remote-time').html(remoteoffset);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Time:
<div id="local-time"></div>
Their time:
<div id="remote-time"></div>
local-time is perfect and displays "hh:mm:ss"
remote-time just displays a list of random numbers.
How can I make remote-time "hh:mm:ss", too?

You're adjusting remote after getting its string representation, so that's doing you no good.
Then you're displaying the result of setHours() (milliseconds since January 1, 1970) rather than the string.
This is what I think you're aiming for:
setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + pad(local.getMinutes()) + ":" + pad(local.getSeconds());
var remote = new Date();
remote.setHours(local.getHours() - 5);
var remotedatetime = remote.getHours() + ":" + pad(remote.getMinutes()) + ":" + pad(remote.getSeconds());
$('#local-time').html(localdatetime);
$('#remote-time').html(remotedatetime);
}, 1000);
function pad(t) {
var st = "" + t;
while (st.length < 2)
st = "0" + st;
return st;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Time:
<div id="local-time"></div>
Their time:
<div id="remote-time"></div>

setInterval(function() {
var local = new Date();
var localdatetime = local.getHours() + ":" + local.getMinutes() + ":" + local.getSeconds();
var remote = new Date();
remote.setHours(local.getHours() - 5);
var remotedatetime = remote.getHours() + ":" + remote.getMinutes() + ":" + remote.getSeconds();
$('#local-time').html(localdatetime);
$('#remote-time').html(remotedatetime);
},1000);

Related

How can i get the time to update without refreshing

So the code/script is below. I want it to update without having to refresh the page. I tried putting it in a loop but the page just never loaded. Can anyone help?
Thanks
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0" + dt.getDate()).slice(-2)) + "." + (("0" + (dt.getMonth() + 1)).slice(-2)) + "." + (dt.getFullYear()) + " " + (("0" + dt.getHours()).slice(-2)) + ":" + (("0" + dt.getMinutes()).slice(-2)) + ":" + (("0" + dt.getSeconds()).slice(-2)) + ":" + (("0" + dt.getMilliseconds()).slice(-2));
setinterval(timer, 1000);
Modify the code like this
setInterval(function(){
var dt = new Date();
document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+(dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2)) +":"+ (("0"+dt.getSeconds()).slice(-2)) +":"+ (("0"+dt.getMilliseconds()).slice(-2));
}, 1);
<div id="datetime">
</div>
This will also work
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
ref: https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

setInterval is not refresh data every second

var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
function dateTimeClock() {
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p id="today"></p>
<p id="day"></p>
<p id="month"></p>
<p id="year"></p>
<p id="date"></p>
<p id="time"></p>
<p id="dateTime"></p>
Can someone please tell why my setInterval is not kicking in ?
I expect my data to refresh every second.
the var for date is defined outside of the interval so it doesn't update. to fix this you'll have to include it in your dateTimeClock function
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);
Your time variables are only called once, so their value doesn't change.
Try calling the time variables from within your dateTimeClock function:
function dateTimeClock() {
var today = new Date();
var day = today.getDay()
var month = today.getMonth();
var year = today.getFullYear()
var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + ' ' + time;
$('#today').text(today);
$('#day').text(day);
$('#month').text(month);
$('#year').text(year);
$('#date').text(date);
$('#time').text(time);
$('#dateTime').text(dateTime);
}
setInterval(dateTimeClock, 1000);

new Date() not working not working inside chrome

var d = new Date();
var h = d.getHour();
var m = d.getMinute();
var s = d.getSecond();
if (h == 12) {
alert(h + ":" + m + ":" + s + " PM");
} else {
alert(h + ":" + m + ":" + s + " AM");
}
What should i do?
Should i change the d.getMinute() to d.getMin()?
Thank you all
The methods are all supposed to be pluralized:
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h == 12) {
alert(h+":"+m+":"+s+" PM");
} else {
alert(h+":"+m+":"+s+" AM");
}
For more more information about the Date methods: W3School

document.lastModified only displays current date?

I've been looking for a way to display the date the page last was updated.
Now I've been searching around, and everything points to the document.lastModified function, but however I've tried to fix it, it always shows the current date.
I've tried this example:
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" + modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds(); }
else {
Seconds = modiDate.getSeconds(); }
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime }
document.write("Last updated on ");
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]"); document.write("");
Or a simple one like this:
<SCRIPT LANGUAGE="JavaScript">
var t = new Date(document.lastModified);
document.write("<I>Last Updated: "+document.lastModified+"</I><BR>");
document.write("<I>Last Updated: "+t+"</I><BR>");
</SCRIPT>
Is there any other way to do this?
.. Without taking a 3 years tech-class?
Press here to see the scripts live
Because you are modifying it currently. Check this out for example.
To make this work based on your requirement, checkout this link and this link
check this it will help u
Put this on the page at the bottom:
<script type="text/javascript" src="js_lus.js"></script>
Name the file whatever you want. Example: js_lus.js Make sure src=""
path is correct for all your pages.
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "-" + (modiDate.getMonth() + 1) + "-" +
modiDate.getFullYear();
return showAs
}
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds();
} else {
Seconds = modiDate.getSeconds();
}
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime
}
document.write("Last updated on ")
document.write(lastModified() + " # " + GetTime());
document.write(" [D M Y 24 Hour Clock]")
document.write("");

JS: Formatting time and date display on website

I have a script that prints the current date and time in JavaScript, but when it prints time, it's missing one 0. Here is the code:
var currentdate = new Date();
var datetime = "0" + currentdate.getDate() + ".0"
+ (currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes();
document.write(datetime);
It should print 04.03.2016 15:04 and prints 04.03.2016 15:4.
Two digit minutes print fine.
Any leads?
Try this
var formatDateDigit = function (i) {
return i <= 9 ? ("0" + i) : i;
};
var currentdate = new Date();
var datetime = formatDateDigit(currentdate.getDate()) + "."
+ formatDateDigit(currentdate.getMonth()+1) + "."
+ currentdate.getFullYear() + " "
+ formatDateDigit(currentdate.getHours()) + ":"
+ formatDateDigit(currentdate.getMinutes());
document.getElementById('my_output_here').innerHTML = datetime;
<div id="my_output_here"></div>

Categories