Timespan javascript - javascript

So i was looking for a function to get the timespan between two dates and i've found this answer on SO
Work with a time span in Javascript
However the date is in this format 7/Nov/2012 20:30:00 and my dates are 7/11/2012 20:30:00, and my values came from inputs
http://jsbin.com/igaruj/47/edit
If a try to change "Nov" to "11" i got NaN on the output. Do i have to convert the dates ?
Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<input type="text" id ="start"value="7/Nov/2012 20:30:00" />
<input type="text" id="end" value="20/Nov/2012 19:15:00" />
</body>
</html>
The javascript
var startDate = document.getElementById("start").value;
var endDate = document.getElementById("end").value;
var date1 = new Date(startDate);
var date2 = new Date(endDate);
var diff = date2.getTime() - date1.getTime();
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * (1000 * 60 * 60 * 24);
var hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * (1000 * 60 * 60);
var mins = Math.floor(diff / (1000 * 60));
diff -= mins * (1000 * 60);
var seconds = Math.floor(diff / (1000));
diff -= seconds * (1000);
console.log(days + " days : " + hours + " hours : " + mins + " minutes : " + seconds + " seconds");

With your 20/11/2012 20:30:00 date format:
var startDate = "7/11/2012 20:30:00";
var endDate = "20/11/2012 19:15:00";
You're getting the NaN because, it wants it in the format mm/dd/yyyy. So 20 is ofcourse an invalid month.. interchange the month and day values like:
var parts = startDate.split('/');
startDate = parts[1] + '/' + parts[0] + '/' + parts[2];
// 11/7/2012 20:30:00
var parts = endDate.split('/');
endDate = parts[1] + '/' + parts[0] + '/' + parts[2];
// 11/20/2012 9:15:00
and then do your normal time diff work and it will work:
var date1 = new Date(startDate);
var date2 = new Date(endDate);
var diff = date2.getTime() - date1.getTime();
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * (1000 * 60 * 60 * 24);
var hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * (1000 * 60 * 60);
var mins = Math.floor(diff / (1000 * 60));
diff -= mins * (1000 * 60);
var seconds = Math.floor(diff / (1000));
diff -= seconds * (1000);
alert(days + " days : " + hours + " hours : " + mins + " minutes : " + seconds + " seconds");
//12 days 22 hours 45 minutes 0 seconds
See the DEMO here

Use JavaScript's Date and simply call new Date("7/Nov/2012 20:30:00") to get a JS Date object. Then you could extract the day, month and year using methods on that Date object.

Related

Javascript output issue when parsing mysql timestamp

I'm attempting to display how much time is left, based on a mysql timestamp. For some reason the output is -1 days, 23 hours, 59 minutes, 59 seconds.
<script type="text/javascript">
function update(datetime = "2021-07-15 20:24:42") {
timeleft = new Date(datetime);
now = new Date();
secs = (timeleft - now) / 1000;
days = Math.floor(secs / (3600 * 24));
hours = Math.floor((secs - (days * (3600 * 24)))/3600);
minutes = Math.floor((secs - (days * (3600 * 24)) - (hours * 3600)) / 60);
seconds = Math.floor(secs - (days * (3600 * 24)) - (hours * 3600) - (minutes * 60));
if (seconds < 0) {
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
}
return days+' days, '+ hours+' hours, '+minutes+' minutes, '+seconds+' seconds';
}
// time is pulled from database, but plugged in manually
member = Date("06-08-21 16:06:37");
alert("Left: "+update(member));
</script>
Any info would be appreciated
1) You can use new Date() to create a new instance and pass a valid date.
2) You are using dd-mm-yy format so you should make it valid because if you pass it directly then it will convert the date
member = new Date(dateString); // 2021-06-08T10:36:37.000Z
i.e Date is 08, month = 06, So you have to swap the date and month value before getting the date instance from new Date()
const dateString = "06-08-21 16:06:37".replace(
/(\d\d)-(\d\d)-(\d\d \d\d:\d\d:\d\d)/,
`$2-$1-$3`
);
function update(datetime = "2021-07-15 20:24:42") {
timeleft = new Date(datetime);
now = new Date();
secs = (timeleft - now) / 1000;
days = Math.floor(secs / (3600 * 24));
hours = Math.floor((secs - days * (3600 * 24)) / 3600);
minutes = Math.floor((secs - days * (3600 * 24) - hours * 3600) / 60);
seconds = Math.floor(secs - days * (3600 * 24) - hours * 3600 - minutes * 60);
if (seconds < 0) {
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
}
return (
days +
" days, " +
hours +
" hours, " +
minutes +
" minutes, " +
seconds +
" seconds"
);
}
// time is pulled from database, but plugged in manually
const dateString = "06-08-21 16:06:37".replace(
/(\d\d)-(\d\d)-(\d\d \d\d:\d\d:\d\d)/,
`$2-$1-$3`
);
member = new Date(dateString);
console.log("Left: " + update(member));

How can i make this countdown work for other timezones?

Im setting up a new years countdown (bit late i know) but i would like to know how to get this to work for other timezones
I have already got it working for the usual UTC timezone as thats default. I have tried the .toLocalString and it returned NaN on the countdown
var countDownDate = new Date("Dec 31, 2018 23:59:02").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("display").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("display").innerHTML = "Happy New Year!";
done()
}
}, 1000);
The Date function of javascript returns local time of each timezone depending from where the page is loaded. So you don't have to keep track of each timezone
explained here
You can achieve this with moment.js easily:
var tz = moment.tz.guess();
console.log("Current Timezone: " + tz);
var last = moment.tz("2018-12-31 23:59:02", tz);
setInterval(function(){
var current = moment.tz(tz);
if(current.isBefore(last, "seconds")){
var diff = moment.duration(last.diff(current));
document.getElementById("display").innerHTML = diff.days() + "d " +
diff.hours() + "h " + diff.minutes() + "m " + diff.seconds() + "s";
}else{
document.getElementById("display").innerHTML = "Happy New Year!";
}
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data-2012-2022.min.js"></script>
<div id="display"></div>

Set a GMT on a countdown script

How can I set a GMT to date.Now()?
var countDownDate = getNextDayOfWeek(new Date(),0,21);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Add 0 when value are < 10
hours = (hours < 10) ? "0"+hours : hours;
minutes = (minutes < 10) ? "0"+minutes : minutes;
seconds = (seconds < 10) ? "0"+seconds : seconds;
var grb = jq("#grb");
// Display the result in the element with id="grb"
grb.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
var one_hour = -60 * -60 * -1000;
if(distance < one_hour){
grb.html("GRB is finished!");
}else{
grb.html("GRB is open!");
}
}
}, 1000);
});
It keeps using the time of your computer, and I want to use a timezone to be stored everytime.
I have tried TimeZoneOffset, didn't worked, any help would be appreciated.
please see this
var now = new Date();
var nowUTC = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
var distance = end - nowUTC;

JavaScript count-up timer

I want to add the count-up timer which will count from specified time.
I want to do this as follows:
I would add the button "reset" and after it's clicked the timer starts and counts forever from that specified time, but if I press it again in the future it counts time from that specified time in the future.
var countDownDate = new Date();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate.getTime() + now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
I have code like this but the output is very wrong.
Here is the link: JSFiddle
Use localStorage to save the date
var countDownDate = localStorage.getItem('startDate');
if (countDownDate) {
countDownDate = new Date(countDownDate);
} else {
countDownDate = new Date();
localStorage.setItem('startDate', countDownDate);
}
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = now - countDownDate.getTime();
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
https://jsfiddle.net/5a6ranep/1/
<!doctype html>
<html>
<body>
<button onclick="console.log(getTimeElapsed());">Log Time Elapsed</button>
<script type="application/javascript">
var startTime = Date.now(); // Get Starting time in MS
var endTime = 0;
var timeElapsed = 0;
function getTimeElapsed() {
endTime = Date.now(); // Get current Time
timeElapsed = endTime - startTime; // current time - startTime = Time Elapsed
startTime = Date.now();
return timeElapsed * 0.001; // Convert MS to S
}
</script>
</body>
</html>

Convert Date to number (not timestamp) in javascript

I am looking for a way to convert a javascript Date to a number that represents the amount of days passed since , for example, 1.1.1900, for that date. As it is usually done with timestamps and miliseconds.
Can I do this?
You can achieve this by using the javascript function getTime().
Code:
var a = new Date();
alert(a.getTime());
Working Example
According to getTime() definition:
The getTime() method returns the numeric value corresponding to the
time for the specified date according to universal time.
More can be found in this link
UPDATE:
If you want to have it in no of days then you would need to calculate it or use library like moment.js
Working Fiddle for Days
For example something like:
var date1 = new Date("1/Jan/1900 00:00:00");
var date2 = new Date("20/Nov/2012 19:15:00");
var diff = date2.getTime() - date1.getTime();
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
diff -= days * (1000 * 60 * 60 * 24);
var hours = Math.floor(diff / (1000 * 60 * 60));
diff -= hours * (1000 * 60 * 60);
var mins = Math.floor(diff / (1000 * 60));
diff -= mins * (1000 * 60);
var seconds = Math.floor(diff / (1000));
diff -= seconds * (1000);
document.write(days + " days, " + hours + " hours, " + mins + " minutes, " + seconds + " seconds");

Categories

Resources