how to display years, months, weeks and days since a date - javascript

Hope you are all well,
I've been struggling to find a way to display the amount of time that has passed since a specific date in years, months, weeks and days. The closest i have found, is this below but i can quite work out how to get it to display the years and months.
Any tips would be greatly appreciated.
Thanks
window.onload = function() {
doTime('jan,01,2017,00:00:01');
}
function doTime(then) {
now = new Date();
then = new Date(then);
difference = (now - then);
days = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
hours = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
document.getElementById('timer').firstChild.nodeValue =
+days + ' days ' + hours + ' hours ' + mins + ' minutes ' + secs + ' seconds';
clearTimeout(doTime.to);
doTime.to = setTimeout(function() {
doTime(then);
}, 1000);
}
<div id="timer"> </div>
—
thanks for the suggestion of the previous post, sadly i have tried that and i can only get it to work the difference between two actual dates, i cant get it to automatically make the end date now so it counts up automatically as time goes on.
—
i have done some more fiddling and managed to get to this, being new to js, would you guys say this is pretty close? thanks
var startDateTime = new Date(2012,5,24,09,43,0,0); // YYYY (M-1) D H m s
(start time and date from DB)
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer;
function updateClock() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000)
var years = Math.floor(diff/(12*4.3479*7*24*60*60));
diff = diff-(years*12*4.3479*7*24*60*60)
var months = Math.floor(diff/(4.3479*7*24*60*60));
diff = diff-(months*4.3479*7*24*60*60)
var weeks = Math.floor(diff/(7*24*60*60));
diff = diff-(weeks*7*24*60*60)
var days = Math.floor(diff/(24*60*60));
diff = diff-(days*24*60*60);
var hours = Math.floor(diff/(60*60));
diff = diff-(hours*60*60);
var mins = Math.floor(diff/(60));
diff = diff-(mins*60);
var secs = diff;
document.getElementById("time-elapsed").innerHTML = years+" years,
"+months+" months, " +weeks+" weeks, " +days+" days, "+hours+" hours and
"+mins+" minutes,";
}
setInterval(updateClock, 1000);
<div id="time-elapsed"></div>

Simple, approximate difference
function calculateDifference(thenString) {
const second = 1000
const minute = 60 * second
const hour = 60 * minute
const day = 24 * hour
const month = 30 * day // approximately
const year = 365 * day // approximately
const now = new Date();
const then = new Date(thenString);
let difference = (now - then);
const time = [{ year }, { month }, { day }, { hour }, { minute }, { second }].map((item, i, a) => {
const [[unitName, unit]] = Object.entries(item)
const units = difference / unit | 0
difference -= unit * units
const maybePlural = units === 1 ? "" : "s"
return units > 0 ? units + " " + unitName + maybePlural : ""
}).filter(x => x)
const formattedTime = time.length > 1 ? [...time.slice(0, -1), "and", time.slice(-1)].join(" ") : time[1]
return formattedTime
}
function displayDifference() {
displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value)
}
const dateInput = document.querySelector(".date")
const timeInput = document.querySelector(".time")
const displayBox = document.querySelector(".js-display-difference")
dateInput.addEventListener("change", displayDifference)
timeInput.addEventListener("change", displayDifference)
displayDifference()
setInterval(displayDifference, 1000)
<h3>
since
<input class="date" type="date" value="2017-01-01"/>
<input class="time" type="time" value="00:00"/>
elapsed
<span class="js-display-difference"></span>
</h3>
Precise difference with momentjs and precise range plugin
function calculateDifference(thenString) {
var m1 = moment(Date.now())
var m2 = moment(new Date(thenString))
var diff = moment.preciseDiff(m1, m2)
return diff
}
function displayDifference() {
displayBox.textContent = calculateDifference(dateInput.value + ", " + timeInput.value)
}
const dateInput = document.querySelector(".date")
const timeInput = document.querySelector(".time")
const displayBox = document.querySelector(".js-display-difference")
dateInput.addEventListener("change", displayDifference)
timeInput.addEventListener("change", displayDifference)
displayDifference()
setInterval(displayDifference, 1000)
<script src="https://unpkg.com/moment#2.18.1"></script>
<script src="https://unpkg.com/moment-precise-range-plugin#1.2.3"></script>
<h3>
since
<input class="date" type="date" value="2017-01-01"/>
<input class="time" type="time" value="00:00"/>
elapsed
<span class="js-display-difference"></span>

I'm not an IT expert so there is probably a better way, but what I have done seems to work. An example can be seen here: Date difference in action
My approach was not to workout the difference in days from the first date but to work out the day position in the 'to date' from the day position in the 'from date'. i.e. on my 60th birthday there had been 15 leap years since I was born, but those days aren't counted. I am 60 years old not 60 years and 15 days.
And just to prove I'm not an IT expert I am unable to post the code but you can view the source code in the example.
BTW I only use chrome / edge so it's not been tested on other platforms.

Related

I want to make if condition between two dates difference [duplicate]

This question already has answers here:
How to calculate number of days between two dates?
(42 answers)
Closed 1 year ago.
const today = new Date();
var date2 = new Date("10/29/2021");
var Difference_In_Time = date2.getTime() - today.getTime();
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
document.write(
"Total number of days between dates <br>" +
today +
"<br> and <br>" +
date2 +
" is: <br> " +
Difference_In_Days
);
First explain what is the issue.
But if you just want one of the correct way of getting date differences. You should look below code.
And don't subtract bigger date from smaller one. If you want to do like that you must get its absolute value. You should do like below code.
const date1 = new Date('9/20/2021');
const date2 = new Date();
const diffTimeInMilliseconds = Math.abs(date2 - date1); // this gives time difference in milliseconds
const diffDays = Math.floor(diffTimeInMilliseconds / (1000 * 60 * 60 * 24)) // 1 second = 1000 ms, 1 minute = 60 s, 1 hour = 60 m, 1 day = 24 h;
console.log(diffTimeInMilliseconds + " milliseconds");
console.log(diffDays + " days");

how to calculate the number of days between two Date values [duplicate]

For example, given two dates in input boxes:
<input id="first" value="1/1/2000"/>
<input id="second" value="1/1/2001"/>
<script>
alert(datediff("day", first, second)); // what goes here?
</script>
How do I get the number of days between two dates in JavaScript?
Here is a quick and dirty implementation of datediff, as a proof of concept to solve the problem as presented in the question. It relies on the fact that you can get the elapsed milliseconds between two dates by subtracting them, which coerces them into their primitive number value (milliseconds since the start of 1970).
/**
* Take the difference between the dates and divide by milliseconds per day.
* Round to nearest whole number to deal with DST.
*/
function datediff(first, second) {
return Math.round((second - first) / (1000 * 60 * 60 * 24));
}
/**
* new Date("dateString") is browser-dependent and discouraged, so we'll write
* a simple parse function for U.S. date format (which does no error checking)
*/
function parseDate(str) {
var mdy = str.split('/');
return new Date(mdy[2], mdy[0] - 1, mdy[1]);
}
alert(datediff(parseDate(first.value), parseDate(second.value)));
<input id="first" value="1/1/2000"/>
<input id="second" value="1/1/2001"/>
You should be aware that the "normal" Date APIs (without "UTC" in the name) operate in the local timezone of the user's browser, so in general you could run into issues if your user is in a timezone that you don't expect, and your code will have to deal with Daylight Saving Time transitions. You should carefully read the documentation for the Date object and its methods, and for anything more complicated, strongly consider using a library that offers more safe and powerful APIs for date manipulation.
Numbers and Dates -- MDN JavaScript Guide
Date -- MDN JavaScript reference
Also, for illustration purposes, the snippet uses named access on the window object for brevity, but in production you should use standardized APIs like getElementById, or more likely, some UI framework.
As of this writing, only one of the other answers correctly handles DST (daylight saving time) transitions. Here are the results on a system located in California:
1/1/2013- 3/10/2013- 11/3/2013-
User Formula 2/1/2013 3/11/2013 11/4/2013 Result
--------- --------------------------- -------- --------- --------- ---------
Miles (d2 - d1) / N 31 0.9583333 1.0416666 Incorrect
some Math.floor((d2 - d1) / N) 31 0 1 Incorrect
fuentesjr Math.round((d2 - d1) / N) 31 1 1 Correct
toloco Math.ceiling((d2 - d1) / N) 31 1 2 Incorrect
N = 86400000
Although Math.round returns the correct results, I think it's somewhat clunky. Instead, by explicitly accounting for changes to the UTC offset when DST begins or ends, we can use exact arithmetic:
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 24 * 60 * 60 * 1000;
return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
}
alert(daysBetween($('#first').val(), $('#second').val()));
Explanation
JavaScript date calculations are tricky because Date objects store times internally in UTC, not local time. For example, 3/10/2013 12:00 AM Pacific Standard Time (UTC-08:00) is stored as 3/10/2013 8:00 AM UTC, and 3/11/2013 12:00 AM Pacific Daylight Time (UTC-07:00) is stored as 3/11/2013 7:00 AM UTC. On this day, midnight to midnight local time is only 23 hours in UTC!
Although a day in local time can have more or less than 24 hours, a day in UTC is always exactly 24 hours.1 The daysBetween method shown above takes advantage of this fact by first calling treatAsUTC to adjust both local times to midnight UTC, before subtracting and dividing.
1. JavaScript ignores leap seconds.
The easiest way to get the difference between two dates:
var diff = Math.floor((Date.parse(str2) - Date.parse(str1)) / 86400000);
You get the difference days (or NaN if one or both could not be parsed). The parse date gived the result in milliseconds and to get it by day you have to divided it by 24 * 60 * 60 * 1000
If you want it divided by days, hours, minutes, seconds and milliseconds:
function dateDiff( str1, str2 ) {
var diff = Date.parse( str2 ) - Date.parse( str1 );
return isNaN( diff ) ? NaN : {
diff : diff,
ms : Math.floor( diff % 1000 ),
s : Math.floor( diff / 1000 % 60 ),
m : Math.floor( diff / 60000 % 60 ),
h : Math.floor( diff / 3600000 % 24 ),
d : Math.floor( diff / 86400000 )
};
}
Here is my refactored version of James version:
function mydiff(date1,date2,interval) {
var second=1000, minute=second*60, hour=minute*60, day=hour*24, week=day*7;
date1 = new Date(date1);
date2 = new Date(date2);
var timediff = date2 - date1;
if (isNaN(timediff)) return NaN;
switch (interval) {
case "years": return date2.getFullYear() - date1.getFullYear();
case "months": return (
( date2.getFullYear() * 12 + date2.getMonth() )
-
( date1.getFullYear() * 12 + date1.getMonth() )
);
case "weeks" : return Math.floor(timediff / week);
case "days" : return Math.floor(timediff / day);
case "hours" : return Math.floor(timediff / hour);
case "minutes": return Math.floor(timediff / minute);
case "seconds": return Math.floor(timediff / second);
default: return undefined;
}
}
I recommend using the moment.js library (http://momentjs.com/docs/#/displaying/difference/). It handles daylight savings time correctly and in general is great to work with.
Example:
var start = moment("2013-11-03");
var end = moment("2013-11-04");
end.diff(start, "days")
1
The following solutions will assume these variables are available in the code:
const startDate = '2020-01-01';
const endDate = '2020-03-15';
Native JS
Steps:
Set start date
Set end date
Calculate difference
Convert milliseconds to days
const diffInMs = new Date(endDate) - new Date(startDate)
const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
Comment:
I know this is not part of your questions but in general, I would not recommend doing any date calculation or manipulation in vanilla JavaScript and rather use a library like date-fns, Luxon or moment.js for it due to many edge cases.
This vanilla JavaScript answer calculates the days as a decimal number. Also, it could run into edge cases when working with Daylight Savings Time
Using a Library
- Date-fns
const differenceInDays = require('date-fns/differenceInDays');
const diffInDays = differenceInDays(new Date(endDate), new Date(startDate));
documentation: https://date-fns.org/v2.16.1/docs/differenceInDays
- Luxon
const { DateTime } = require('luxon');
const diffInDays = DateTime.fromISO(endDate).diff(DateTime.fromISO(startDate), 'days').toObject().days;
documentation: https://moment.github.io/luxon/docs/class/src/datetime.js~DateTime.html#instance-method-diff
- Moment.js
const moment = require('moment');
const diffInDays = moment(endDate).diff(moment(startDate), 'days');
documentation: https://momentjs.com/docs/#/displaying/difference/
Examples on RunKit
I would go ahead and grab this small utility and in it you will find functions to this for you. Here's a short example:
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript">
var minutes = 1000*60;
var hours = minutes*60;
var days = hours*24;
var foo_date1 = getDateFromFormat("02/10/2009", "M/d/y");
var foo_date2 = getDateFromFormat("02/12/2009", "M/d/y");
var diff_date = Math.round((foo_date2 - foo_date1)/days);
alert("Diff date is: " + diff_date );
</script>
Using Moment.js
var future = moment('05/02/2015');
var start = moment('04/23/2015');
var d = future.diff(start, 'days'); // 9
console.log(d);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
Try This
let today = new Date().toISOString().slice(0, 10)
const startDate = '2021-04-15';
const endDate = today;
const diffInMs = new Date(endDate) - new Date(startDate)
const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
alert( diffInDays );
To Calculate days between 2 given dates you can use the following code.Dates I use here are Jan 01 2016 and Dec 31 2016
var day_start = new Date("Jan 01 2016");
var day_end = new Date("Dec 31 2016");
var total_days = (day_end - day_start) / (1000 * 60 * 60 * 24);
document.getElementById("demo").innerHTML = Math.round(total_days);
<h3>DAYS BETWEEN GIVEN DATES</h3>
<p id="demo"></p>
Date values in JS are datetime values.
So, direct date computations are inconsistent:
(2013-11-05 00:00:00) - (2013-11-04 10:10:10) < 1 day
for example we need to convert de 2nd date:
(2013-11-05 00:00:00) - (2013-11-04 00:00:00) = 1 day
the method could be truncate the mills in both dates:
var date1 = new Date('2013/11/04 00:00:00');
var date2 = new Date('2013/11/04 10:10:10'); //less than 1
var start = Math.floor(date1.getTime() / (3600 * 24 * 1000)); //days as integer from..
var end = Math.floor(date2.getTime() / (3600 * 24 * 1000)); //days as integer from..
var daysDiff = end - start; // exact dates
console.log(daysDiff);
date2 = new Date('2013/11/05 00:00:00'); //1
var start = Math.floor(date1.getTime() / (3600 * 24 * 1000)); //days as integer from..
var end = Math.floor(date2.getTime() / (3600 * 24 * 1000)); //days as integer from..
var daysDiff = end - start; // exact dates
console.log(daysDiff);
Better to get rid of DST, Math.ceil, Math.floor etc. by using UTC times:
var firstDate = Date.UTC(2015,01,2);
var secondDate = Date.UTC(2015,04,22);
var diff = Math.abs((firstDate.valueOf()
- secondDate.valueOf())/(24*60*60*1000));
This example gives difference 109 days. 24*60*60*1000 is one day in milliseconds.
It is possible to calculate a full proof days difference between two dates resting across different TZs using the following formula:
var start = new Date('10/3/2015');
var end = new Date('11/2/2015');
var days = (end - start) / 1000 / 60 / 60 / 24;
console.log(days);
// actually its 30 ; but due to daylight savings will show 31.0xxx
// which you need to offset as below
days = days - (end.getTimezoneOffset() - start.getTimezoneOffset()) / (60 * 24);
console.log(days);
I found this question when I want do some calculate on two date, but the date have hours and minutes value, I modified #michael-liu 's answer to fit my requirement, and it passed my test.
diff days 2012-12-31 23:00 and 2013-01-01 01:00 should equal 1. (2 hour)
diff days 2012-12-31 01:00 and 2013-01-01 23:00 should equal 1. (46 hour)
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
var millisecondsPerDay = 24 * 60 * 60 * 1000;
function diffDays(startDate, endDate) {
return Math.floor(treatAsUTC(endDate) / millisecondsPerDay) - Math.floor(treatAsUTC(startDate) / millisecondsPerDay);
}
This may not be the most elegant solution, but it seems to answer the question with a relatively simple bit of code, I think. Can't you use something like this:
function dayDiff(startdate, enddate) {
var dayCount = 0;
while(enddate >= startdate) {
dayCount++;
startdate.setDate(startdate.getDate() + 1);
}
return dayCount;
}
This is assuming you are passing date objects as parameters.
var start= $("#firstDate").datepicker("getDate");
var end= $("#SecondDate").datepicker("getDate");
var days = (end- start) / (1000 * 60 * 60 * 24);
alert(Math.round(days));
jsfiddle example :)
One-Liner and small
const diff=(e,t)=>Math.floor((new Date(e).getTime()-new Date(t).getTime())/1000*60*60*24);
// or
const diff=(e,t)=>Math.floor((new Date(e)-new Date(t))/864e5);
// or
const diff=(a,b)=>(new Date(a)-new Date(b))/864e5|0;
// use
diff('1/1/2001', '1/1/2000')
For TypeScript
const diff = (from: string, to: string) => Math.floor((new Date(from).getTime() - new Date(to).getTime()) / 86400000);
I think the solutions aren't correct 100% I would use ceil instead of floor, round will work but it isn't the right operation.
function dateDiff(str1, str2){
var diff = Date.parse(str2) - Date.parse(str1);
return isNaN(diff) ? NaN : {
diff: diff,
ms: Math.ceil(diff % 1000),
s: Math.ceil(diff / 1000 % 60),
m: Math.ceil(diff / 60000 % 60),
h: Math.ceil(diff / 3600000 % 24),
d: Math.ceil(diff / 86400000)
};
}
What about using formatDate from DatePicker widget? You could use it to convert the dates in timestamp format (milliseconds since 01/01/1970) and then do a simple subtraction.
function timeDifference(date1, date2) {
var oneDay = 24 * 60 * 60; // hours*minutes*seconds
var oneHour = 60 * 60; // minutes*seconds
var oneMinute = 60; // 60 seconds
var firstDate = date1.getTime(); // convert to milliseconds
var secondDate = date2.getTime(); // convert to milliseconds
var seconds = Math.round(Math.abs(firstDate - secondDate) / 1000); //calculate the diffrence in seconds
// the difference object
var difference = {
"days": 0,
"hours": 0,
"minutes": 0,
"seconds": 0,
}
//calculate all the days and substract it from the total
while (seconds >= oneDay) {
difference.days++;
seconds -= oneDay;
}
//calculate all the remaining hours then substract it from the total
while (seconds >= oneHour) {
difference.hours++;
seconds -= oneHour;
}
//calculate all the remaining minutes then substract it from the total
while (seconds >= oneMinute) {
difference.minutes++;
seconds -= oneMinute;
}
//the remaining seconds :
difference.seconds = seconds;
//return the difference object
return difference;
}
console.log(timeDifference(new Date(2017,0,1,0,0,0),new Date()));
Date.prototype.days = function(to) {
return Math.abs(Math.floor(to.getTime() / (3600 * 24 * 1000)) - Math.floor(this.getTime() / (3600 * 24 * 1000)))
}
console.log(new Date('2014/05/20').days(new Date('2014/05/23'))); // 3 days
console.log(new Date('2014/05/23').days(new Date('2014/05/20'))); // 3 days
Simple, easy, and sophisticated. This function will be called in every 1 sec to update time.
const year = (new Date().getFullYear());
const bdayDate = new Date("04,11,2019").getTime(); //mmddyyyy
// countdown
let timer = setInterval(function () {
// get today's date
const today = new Date().getTime();
// get the difference
const diff = bdayDate - today;
// math
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
}, 1000);
I had the same issue in Angular. I do the copy because else he will overwrite the first date. Both dates must have time 00:00:00 (obviously)
/*
* Deze functie gebruiken we om het aantal dagen te bereken van een booking.
* */
$scope.berekenDagen = function ()
{
$scope.booking.aantalDagen=0;
/*De loper is gelijk aan de startdag van je reservatie.
* De copy is nodig anders overschijft angular de booking.van.
* */
var loper = angular.copy($scope.booking.van);
/*Zolang de reservatie beschikbaar is, doorloop de weekdagen van je start tot einddatum.*/
while (loper < $scope.booking.tot) {
/*Tel een dag op bij je loper.*/
loper.setDate(loper.getDate() + 1);
$scope.booking.aantalDagen++;
}
/*Start datum telt natuurlijk ook mee*/
$scope.booking.aantalDagen++;
$scope.infomsg +=" aantal dagen: "+$scope.booking.aantalDagen;
};
If you have two unix timestamps, you can use this function (made a little more verbose for the sake of clarity):
// Calculate number of days between two unix timestamps
// ------------------------------------------------------------
var daysBetween = function(timeStampA, timeStampB) {
var oneDay = 24 * 60 * 60 * 1000; // hours * minutes * seconds * milliseconds
var firstDate = new Date(timeStampA * 1000);
var secondDate = new Date(timeStampB * 1000);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
return diffDays;
};
Example:
daysBetween(1096580303, 1308713220); // 2455
Be careful when using milliseconds.
The date.getTime() returns milliseconds and doing math operation with milliseconds requires to include
Daylight Saving Time (DST)
checking if both dates have the same time (hours, minutes, seconds, milliseconds)
make sure what behavior of days diff is required: 19 September 2016 - 29 September 2016 = 1 or 2 days difference?
The example from comment above is the best solution I found so far
https://stackoverflow.com/a/11252167/2091095 . But use +1 to its result if you want the to count all days involved.
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 24 * 60 * 60 * 1000;
return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
}
var diff = daysBetween($('#first').val(), $('#second').val()) + 1;
I used below code to experiment the posting date functionality for a news post.I calculate the minute or hour or day or year based on the posting date and current date.
var startDate= new Date("Mon Jan 01 2007 11:00:00");
var endDate =new Date("Tue Jan 02 2007 12:50:00");
var timeStart = startDate.getTime();
var timeEnd = endDate.getTime();
var yearStart = startDate.getFullYear();
var yearEnd = endDate.getFullYear();
if(yearStart == yearEnd)
{
var hourDiff = timeEnd - timeStart;
var secDiff = hourDiff / 1000;
var minDiff = hourDiff / 60 / 1000;
var hDiff = hourDiff / 3600 / 1000;
var myObj = {};
myObj.hours = Math.floor(hDiff);
myObj.minutes = minDiff
if(myObj.hours >= 24)
{
console.log(Math.floor(myObj.hours/24) + "day(s) ago")
}
else if(myObj.hours>0)
{
console.log(myObj.hours +"hour(s) ago")
}
else
{
console.log(Math.abs(myObj.minutes) +"minute(s) ago")
}
}
else
{
var yearDiff = yearEnd - yearStart;
console.log( yearDiff +" year(s) ago");
}
if you wanna have an DateArray with dates try this:
<script>
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = moment(startDate);
dateArray.push( moment(currentDate).format('L'));
var stopDate = moment(stopDate);
while (dateArray[dateArray.length -1] != stopDate._i) {
dateArray.push( moment(currentDate).format('L'));
currentDate = moment(currentDate).add(1, 'days');
}
return dateArray;
}
</script>
DebugSnippet
The simple way to calculate days between two dates is to remove both of their time component i.e. setting hours, minutes, seconds and milliseconds to 0 and then subtracting their time and diving it with milliseconds worth of one day.
var firstDate= new Date(firstDate.setHours(0,0,0,0));
var secondDate= new Date(secondDate.setHours(0,0,0,0));
var timeDiff = firstDate.getTime() - secondDate.getTime();
var diffDays =timeDiff / (1000 * 3600 * 24);
function formatDate(seconds, dictionary) {
var foo = new Date;
var unixtime_ms = foo.getTime();
var unixtime = parseInt(unixtime_ms / 1000);
var diff = unixtime - seconds;
var display_date;
if (diff <= 0) {
display_date = dictionary.now;
} else if (diff < 60) {
if (diff == 1) {
display_date = diff + ' ' + dictionary.second;
} else {
display_date = diff + ' ' + dictionary.seconds;
}
} else if (diff < 3540) {
diff = Math.round(diff / 60);
if (diff == 1) {
display_date = diff + ' ' + dictionary.minute;
} else {
display_date = diff + ' ' + dictionary.minutes;
}
} else if (diff < 82800) {
diff = Math.round(diff / 3600);
if (diff == 1) {
display_date = diff + ' ' + dictionary.hour;
} else {
display_date = diff + ' ' + dictionary.hours;
}
} else {
diff = Math.round(diff / 86400);
if (diff == 1) {
display_date = diff + ' ' + dictionary.day;
} else {
display_date = diff + ' ' + dictionary.days;
}
}
return display_date;
}
I recently had the same question, and coming from a Java world, I immediately started to search for a JSR 310 implementation for JavaScript. JSR 310 is a Date and Time API for Java (standard shipped as of Java 8). I think the API is very well designed.
Fortunately, there is a direct port to Javascript, called js-joda.
First, include js-joda in the <head>:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/js-joda/1.11.0/js-joda.min.js"
integrity="sha512-piLlO+P2f15QHjUv0DEXBd4HvkL03Orhi30Ur5n1E4Gk2LE4BxiBAP/AD+dxhxpW66DiMY2wZqQWHAuS53RFDg=="
crossorigin="anonymous"></script>
Then simply do this:
let date1 = JSJoda.LocalDate.of(2020, 12, 1);
let date2 = JSJoda.LocalDate.of(2021, 1, 1);
let daysBetween = JSJoda.ChronoUnit.DAYS.between(date1, date2);
Now daysBetween contains the number of days between. Note that the end date is exclusive.
// JavaScript / NodeJs answer
let startDate = new Date("2022-09-19");
let endDate = new Date("2022-09-26");
let difference = startDate.getTime() - endDate.getTime();
console.log(difference);
let TotalDiffDays = Math.ceil(difference / (1000 * 3600 * 24));
console.log(TotalDiffDays + " days :) ");

Count up Timer changes for text output

I'm a real JS novice. I finally found a simple webpage-only script that gives a count up time from a fixed date, and with beginner's luck I tweaked it to give text output in minutes and hours from the supplied span html.
However it shows "Updated 0 hours 9 min ago".
I want to remove the unnecessary '0 hours' until 60 minutes have passed to show: "Updated 9 min ago".
Then show hours again: "Updated 1 hours 1 min ago".
Appreciate any help on this, many thanks.
window.onload = function() {
// Month Day, Year Hour:Minute:Second, id-of-element-container
countUpFromTime("Jan 22, 2020 08:45:30", 'countup1'); // ****** Change this line!
};
function countUpFromTime(countFrom, id) {
countFrom = new Date(countFrom).getTime();
var now = new Date(),
countFrom = new Date(countFrom),
timeDifference = (now - countFrom);
var secondsInADay = 60 * 60 * 1000 * 24,
secondsInAHour = 60 * 60 * 1000;
days = Math.floor(timeDifference / (secondsInADay) * 1);
hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);
var idEl = document.getElementById(id);
idEl.getElementsByClassName('hours')[0].innerHTML = hours;
idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 1000);
}

Countdown timer to a date set from admin panel

I am trying to make a countdown timer that will countdown to a certain date and time.
I would like to be able to set the date and time from a 'admin panel' by typing in the date and time(ex 2014-01-25, 15:00) in a textbox or something similar.
As you might've figured, I'm not the best at PHP or JavaScript and I'm in need of directions as of how I would do this.
Any help is appreciated as I haven't made any progress in the last 2 hours I've tried doing this.
To do this with no frameworks like JQuery, you can do the following:
var MINUTE_IN_MILLISECONDS = 60 * 1000;
var HOUR_IN_MILLISECONDS = 60 * MINUTE_IN_MILLISECONDS;
var YEAR_IN_MILLISECONDS = 24 * HOUR_IN_MILLISECONDS;
var targetDate = new Date('2014-01-25 15:00');
var countdownInterval;
function countdown(){
var currentDate = new Date();
var difference = targetDate.getTime() - currentDate.getTime();
//Countdown has expired, cancel interval and do other tasks here
if(difference <= 0)
{
difference = 0;
clearInterval(countdownInterval);
//Update button here
}
var days = Math.floor(difference / YEAR_IN_MILLISECONDS);
difference -= days * YEAR_IN_MILLISECONDS;
var hours = Math.floor(difference / HOUR_IN_MILLISECONDS);
difference -= hours * HOUR_IN_MILLISECONDS;
var minutes = Math.floor(difference / MINUTE_IN_MILLISECONDS);
difference -= minutes * MINUTE_IN_MILLISECONDS;
var seconds = Math.floor(difference / 1000);
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}
countdownInterval = setInterval(countdown, 1000);
Here's the Fiddle
Full demonstration: http://jsfiddle.net/DerekL/T48SL/
<form>
<input type="date" required><input type="time" required>
<input type="submit">
</form>
<span></span>
$("form").on("submit", function (e) {
e.preventDefault();
var date = $("input[type=date]").val(),
time = $("input[type=time]").val(),
targetTime = new Date(date + " " + time),
interval = setInterval(function () {
$("span").html(
(((+startingTime - Date.now()) / 1000)|0) + " seconds left until " + startingTime.toString() + "."
);
}, 500);
});
It is fairly easy to format the time instead of just seconds with Algebra:
//yourTime is in seconds
(yourTime) % 60 //seconds
(yourTime / 60 |0) % 60 //minutes
(yourTime / 3600 |0) % 24 //hours
(yourTime / 86400 |0) //days
/*
* Explanation:
* % is mod, it finds the remainder of two numbers.
* |0 is binary OR, it rounds down a floating number.
*
*/
With this technique, you do not need to do a bunch of subtraction and create a lot of junk variables in the process.

Display real time years, months, weeks and days between 2 days in JavaScript

This is what I've coded it up, and it appears to work.
window.onload = function() {
var currentSpan = document.getElementById('current');
var minute = 60000,
hour = minute * 60,
day = hour * 24,
week = day * 7,
month = week * 4,
year = day * 365;
var start = new Date(2009, 6, 1);
setInterval(function() {
var now = new Date();
var difference = now - start;
var years = Math.floor(difference / year),
months = Math.floor((difference - (years * year)) / month),
weeks = Math.floor((difference - (months * month + years * year)) / week),
days = Math.floor((difference - (weeks * week + months * month + years * year)) / day);
currentSpan.innerHTML = 'Since has passed: ' + years + ' years, ' + months + ' months, ' + weeks + ' weeks and ' + days + ' days';
}, 500);
};
This seems to update my span fine, and all the numbers look correct.
However, the code looks quite ugly. Do I really need to set up faux constants like that, and then do all that math to calculate what I want?
It's been a while since I've worked with the Date object.
Is this the best way to do this?
You could put those constants in an array and then just iterate through it:
function tdiff(utc) {
var diff = new Date() - new Date(utc);
var units = [
1000 * 60 * 60 * 24 * 365,
1000 * 60 * 60 * 24 * 28,
1000 * 60 * 60 * 24 * 7,
1000 * 60 * 60 * 24,
1000 * 60 * 60,
1000 * 60,
1000
];
var rv = [];
for (var i = 0; i < units.length; ++i) {
rv.push(Math.floor(diff / units[i]));
diff = diff % units[i];
}
return rv;
}
Of course since months and years aren't always the same length, this isn't really that accurate, but I figure you realize that :-)
Also see this: http://timeago.yarp.com/ it's kind-of cool
You don't have to set up any constants, but if you need all those numbers (years, months, days, hours etc) I don't know of any other way it can be done.

Categories