125

I'm creating an application which lets you define events with a time frame. I want to automatically fill in the end date when the user selects or changes the start date. I can't quite figure out, however, how to get the difference between the two times, and then how to create a new end Date using that difference.

1

19 Answers 19

83

In JavaScript, dates can be transformed to the number of milliseconds since the epoc by calling the getTime() method or just using the date in a numeric expression.

So to get the difference, just subtract the two dates.

To create a new date based on the difference, just pass the number of milliseconds in the constructor.

var oldBegin = ... var oldEnd = ... var newBegin = ... var newEnd = new Date(newBegin + oldEnd - oldBegin); 

This should just work

EDIT: Fixed bug pointed by @bdukes

EDIT:

For an explanation of the behavior, oldBegin, oldEnd, and newBegin are Date instances. Calling operators + and - will trigger Javascript auto casting and will automatically call the valueOf() prototype method of those objects. It happens that the valueOf() method is implemented in the Date object as a call to getTime().

So basically: date.getTime() === date.valueOf() === (0 + date) === (+date)

Sign up to request clarification or add additional context in comments.

5 Comments

What is the format required for .getTime() to work... For example - new Date('22-12-2012 00:00').getTime() will not work... Any ideas?
For date parsing in JS, I suggest you have a look to this question: stackoverflow.com/questions/1576753/…
Are OldBegin, oldEnd, and NewBegin supposed to be Date objects? It's hard to tell what type of object they're supposed to be, since the variable declaration is omitted here.
Also, there's a function that you can use to add or subtract dates in JavaScript: stackoverflow.com/a/1214753/975097
Be careful with adding numbers and days. See my answer below for explanation
27

JavaScript perfectly supports date difference out of the box

https://jsfiddle.net/b9chris/v5twbe3h/

var msMinute = 60*1000, msDay = 60*60*24*1000, a = new Date(2012, 2, 12, 23, 59, 59), b = new Date("2013 march 12"); console.log(Math.floor((b - a) / msDay) + ' full days between'); // 364 console.log(Math.floor(((b - a) % msDay) / msMinute) + ' full minutes between'); // 0 

Now some pitfalls. Try this:

console.log(a - 10); // 1331614798990 console.log(a + 10); // mixed string 

So if you have risk of adding a number and Date, convert Date to number directly.

console.log(a.getTime() - 10); // 1331614798990 console.log(a.getTime() + 10); // 1331614799010 

My fist example demonstrates the power of Date object but it actually appears to be a time bomb

4 Comments

Dan, I found your example the easiest to understand and follow. Thanks.
The "pitfalls" are actually defaults based on the language specification. The subtraction operator - coerces the arguments to number, so the Date returns its time value. The + operator is overloaded, so might do addition, coercion to number or concatenation. Since Dates coerce to String in this case, + does concatenation. Confusion is not the fault of the Date object, but of overloading operators.
I added a jsfiddle and the results of the above lines of code in an edit. I also included a quick way to end up at NaN: b + 60000 - a
For those coming from search engines; avoid parsing strings by passing them to new Date, unless in specific formats (see What are valid Date Time Strings in JavaScript?).
11

See JsFiddle DEMO

 var date1 = new Date(); var date2 = new Date("2025/07/30 21:59:00"); //Customise date2 for your required future time showDiff(); function showDiff(date1, date2){ var diff = (date2 - date1)/1000; diff = Math.abs(Math.floor(diff)); var days = Math.floor(diff/(24*60*60)); var leftSec = diff - days * 24*60*60; var hrs = Math.floor(leftSec/(60*60)); var leftSec = leftSec - hrs * 60*60; var min = Math.floor(leftSec/(60)); var leftSec = leftSec - min * 60; document.getElementById("showTime").innerHTML = "You have " + days + " days " + hrs + " hours " + min + " minutes and " + leftSec + " seconds before death."; setTimeout(showDiff,1000); } 

for your HTML Code:

<div id="showTime"></div> 

2 Comments

Not all days are 24 hours long where daylight saving is observed. Using the built–in parser to parse an unsupported string format is not a good way to create a Date.
For those coming from search engines; avoid parsing strings by passing them to new Date, unless in specific formats (see What are valid Date Time Strings in JavaScript?).
5

If you don't care about the time component, you can use .getDate() and .setDate() to just set the date part.

So to set your end date to 2 weeks after your start date, do something like this:

function GetEndDate(startDate) { var endDate = new Date(startDate.getTime()); endDate.setDate(endDate.getDate()+14); return endDate; } 

To return the difference (in days) between two dates, do this:

function GetDateDiff(startDate, endDate) { return endDate.getDate() - startDate.getDate(); } 

Finally, let's modify the first function so it can take the value returned by 2nd as a parameter:

function GetEndDate(startDate, days) { var endDate = new Date(startDate.getTime()); endDate.setDate(endDate.getDate() + days); return endDate; } 

2 Comments

GetDateDiff() will break across month barriers. For example, 2011/04/26 and 2011/05/01 will return -25, but the offset should be 5 days.
var ds = new Date(2014, 0, 31, 0, 0, 0, 0); var de = new Date(2014, 2, 31, 0, 0, 0, 0); GetDateDiff(ds,de) return 0
4

Thanks @Vincent Robert, I ended up using your basic example, though it's actually newBegin + oldEnd - oldBegin. Here's the simplified end solution:

 // don't update end date if there's already an end date but not an old start date if (!oldEnd || oldBegin) { var selectedDateSpan = 1800000; // 30 minutes if (oldEnd) { selectedDateSpan = oldEnd - oldBegin; } newEnd = new Date(newBegin.getTime() + selectedDateSpan)); } 

1 Comment

It's good point to explain why you are sometimes using getTime and sometimes not
3

Depending on your needs, this function will calculate the difference between the 2 days, and return a result in days decimal.

// This one returns a signed decimal. The sign indicates past or future. this.getDateDiff = function(date1, date2) { return (date1.getTime() - date2.getTime()) / (1000 * 60 * 60 * 24); } // This one always returns a positive decimal. (Suggested by Koen below) this.getDateDiff = function(date1, date2) { return Math.abs((date1.getTime() - date2.getTime()) / (1000 * 60 * 60 * 24)); } 

4 Comments

Place it in a Math.abs() call, and you will always get a positive decimal.
Nice suggestion Koen. That gives people 2 options: just the true date diff as you suggested, or a datediff with the sign indicating if the difference is in the past or future. :)
Please note that in JavaScript you can also add/substract a number in milliseconds to date.getTime() to get time in future/past. `var nextMinute = new Date( someDate.getTime() + 60 * 1000 );
This is a typo? "between the 2 days". Probably between 2 dates.
2

If using moment.js, there is a simpler solution, which will give you the difference in days in one single line of code.

moment(endDate).diff(moment(beginDate), 'days'); 

Additional details can be found in the moment.js page

Comments

1
function compare() { var end_actual_time = $('#date3').val(); start_actual_time = new Date(); end_actual_time = new Date(end_actual_time); var diff = end_actual_time-start_actual_time; var diffSeconds = diff/1000; var HH = Math.floor(diffSeconds/3600); var MM = Math.floor(diffSeconds%3600)/60; var formatted = ((HH < 10)?("0" + HH):HH) + ":" + ((MM < 10)?("0" + MM):MM) getTime(diffSeconds); } function getTime(seconds) { var days = Math.floor(leftover / 86400); //how many seconds are left leftover = leftover - (days * 86400); //how many full hours fits in the amount of leftover seconds var hours = Math.floor(leftover / 3600); //how many seconds are left leftover = leftover - (hours * 3600); //how many minutes fits in the amount of leftover seconds var minutes = leftover / 60; //how many seconds are left //leftover = leftover - (minutes * 60); alert(days + ':' + hours + ':' + minutes); } 

Comments

1

alternative modificitaion extended code..

http://jsfiddle.net/vvGPQ/48/

showDiff(); function showDiff(){ var date1 = new Date("2013/01/18 06:59:00"); var date2 = new Date(); //Customise date2 for your required future time var diff = (date2 - date1)/1000; var diff = Math.abs(Math.floor(diff)); var years = Math.floor(diff/(365*24*60*60)); var leftSec = diff - years * 365*24*60*60; var month = Math.floor(leftSec/((365/12)*24*60*60)); var leftSec = leftSec - month * (365/12)*24*60*60; var days = Math.floor(leftSec/(24*60*60)); var leftSec = leftSec - days * 24*60*60; var hrs = Math.floor(leftSec/(60*60)); var leftSec = leftSec - hrs * 60*60; var min = Math.floor(leftSec/(60)); var leftSec = leftSec - min * 60; document.getElementById("showTime").innerHTML = "You have " + years + " years "+ month + " month " + days + " days " + hrs + " hours " + min + " minutes and " + leftSec + " seconds the life time has passed."; setTimeout(showDiff,1000); } 

3 Comments

Please add further clarification to your answer and use better English.
This solution is wrong because you use 365 days, neglecting leap years.
For those coming from search engines; avoid parsing strings by passing them to new Date, unless in specific formats (see What are valid Date Time Strings in JavaScript?).
1

Below code will return the days left from today to futures date.

Dependencies: jQuery and MomentJs.

var getDaysLeft = function (date) { var today = new Date(); var daysLeftInMilliSec = Math.abs(new Date(moment(today).format('YYYY-MM-DD')) - new Date(date)); var daysLeft = daysLeftInMilliSec / (1000 * 60 * 60 * 24); return daysLeft; }; getDaysLeft('YYYY-MM-DD'); 

Comments

0
<html> <head> <script> function dayDiff() { var start = document.getElementById("datepicker").value; var end= document.getElementById("date_picker").value; var oneDay = 24*60*60*1000; var firstDate = new Date(start); var secondDate = new Date(end); var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); document.getElementById("leave").value =diffDays ; } </script> </head> <body> <input type="text" name="datepicker"value=""/> <input type="text" name="date_picker" onclick="function dayDiff()" value=""/> <input type="text" name="leave" value=""/> </body> </html> 

Comments

0

this code fills the duration of study years when you input the start date and end date(qualify accured date) of study and check if the duration less than a year if yes the alert a message take in mind there are three input elements the first txtFromQualifDate and second txtQualifDate and third txtStudyYears

it will show result of number of years with fraction

function getStudyYears() { if(document.getElementById('txtFromQualifDate').value != '' && document.getElementById('txtQualifDate').value != '') { var d1 = document.getElementById('txtFromQualifDate').value; var d2 = document.getElementById('txtQualifDate').value; var one_day=1000*60*60*24; var x = d1.split("/"); var y = d2.split("/"); var date1=new Date(x[2],(x[1]-1),x[0]); var date2=new Date(y[2],(y[1]-1),y[0]) var dDays = (date2.getTime()-date1.getTime())/one_day; if(dDays < 365) { alert("the date between start study and graduate must not be less than a year !"); document.getElementById('txtQualifDate').value = ""; document.getElementById('txtStudyYears').value = ""; return ; } var dMonths = Math.ceil(dDays / 30); var dYears = Math.floor(dMonths /12) + "." + dMonths % 12; document.getElementById('txtStudyYears').value = dYears; } } 

2 Comments

Never ever parse date strings to find year because string appearence (esp. separators) differs among browsers. Use getFullYear which was designed for that. ------- See datejs library on googlecode which possibly supports most corner cases
thanks for advice @Dan but it worked and tested for me on real goverment project (different browsers) is it that weak programming practive ? :)
0

If you use Date objects and then use the getTime() function for both dates it will give you their respective times since Jan 1, 1970 in a number value. You can then get the difference between these numbers.

If that doesn't help you out, check out the complete documentation: http://www.w3schools.com/jsref/jsref_obj_date.asp

1 Comment

Oh, yea, didn't notice, answers below this one are at most half a year old.
0
var getDaysLeft = function (date1, date2) { var daysDiffInMilliSec = Math.abs(new Date(date1) - new Date(date2)); var daysLeft = daysDiffInMilliSec / (1000 * 60 * 60 * 24); return daysLeft; }; var date1='2018-05-18'; var date2='2018-05-25'; var dateDiff = getDaysLeft(date1, date2); console.log(dateDiff); 

Comments

0

To get the date difference in milliseconds between two dates:

var diff = Math.abs(date1 - date2); 

I'm not sure what you mean by converting the difference back into a date though.

Comments

0

Many answers here are based on a direct subtraction of Date objects like new Date(…) - new Date(…). This is syntactically wrong. Browsers still accept it because of backward compatibility. But modern JS linters will throw at you.

The right way to calculate date differences in milliseconds is new Date(…).getTime() - new Date(…).getTime():

// Time difference between two dates let diffInMillis = new Date(…).getTime() - new Date(…).getTime() 

If you want to calculate the time difference to now, you can just remove the argument from the first Date:

// Time difference between now and some date let diffInMillis = new Date().getTime() - new Date(…).getTime() 

Comments

0

this is the general approach

change the function to suit your needs

function subtractDateTimes(date1, date2) { /* calculate the difference in various units such as days, hours, minutes, and seconds const date1 = '2024-06-20T12:10:00'; const date2 = '2024-06-20T12:00:00'; const difference = subtractDateTimes(date1, date2); console.log(difference); */ const d1 = new Date(date1); const d2 = new Date(date2); const diffInMs = d1 - d2; // Calculate difference in various units const diffInSeconds = Math.floor(diffInMs / 1000); const diffInMinutes = Math.floor(diffInMs / (1000 * 60)); const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60)); const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24)); return { milliseconds: diffInMs, seconds: diffInSeconds, minutes: diffInMinutes, hours: diffInHours, days: diffInDays }; } 

and in human view

function convertMillisecondsToDaysHoursSeconds(ms) { /* To convert milliseconds to days, hours, and seconds const date1 = '2024-06-20T12:10:00'; const date2 = '2024-05-20T13:43:00'; const difference = subtractDateTimes(date1, date2); const difference_human = convertMillisecondsToDaysHoursSeconds(difference.milliseconds); console.log(difference); console.log(difference_human); */ const days = Math.floor(ms / (24 * 60 * 60 * 1000)); ms %= (24 * 60 * 60 * 1000); const hours = Math.floor(ms / (60 * 60 * 1000)); ms %= (60 * 60 * 1000); const minutes = Math.floor(ms / (60 * 1000)); ms %= (60 * 1000); const seconds = Math.floor(ms / 1000); ms %= 1000; return { days: days, hours: hours, minutes: minutes, seconds: seconds, }; } 

Comments

-1
function checkdate() { var indate = new Date() indate.setDate(dat) indate.setMonth(mon - 1) indate.setFullYear(year) var one_day = 1000 * 60 * 60 * 24 var diff = Math.ceil((indate.getTime() - now.getTime()) / (one_day)) var str = diff + " days are remaining.." document.getElementById('print').innerHTML = str.fontcolor('blue') } 

Comments

-1

THIS IS WHAT I DID ON MY SYSTEM.

var startTime=("08:00:00").split(":"); var endTime=("16:00:00").split(":"); var HoursInMinutes=((parseInt(endTime[0])*60)+parseInt(endTime[1]))-((parseInt(startTime[0])*60)+parseInt(startTime[1])); console.log(HoursInMinutes/60); 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.