Calculating the difference between two dates in JavaScript

Calculating the difference between two dates in JavaScript is relatively straightforward, provided you choose the right Date methods to work with. Whichever way you get there, the potential applications on date differences are many, from counting down to a particular event, counting up from a past date, to dynamically indicating what's new on your page. Sounds like fun!

For the scripts that follow, the above is our hero people, not some Hollywood actor. Date.getTime() is a prebuilt JS method that returns the time elapsed from January 1st, 1970 to the current Date instance, in milliseconds. Its superpower is not so much its long term memory, as impressive as that may be, but its knack for converting a date to a number (in milliseconds, but nevertheless). And we all know the easiest subjects to perform arithmetic on are numbers.

So here's the general premise for calculating the difference between two dates- convert both dates to a number using Date.getTime(), and subtract! To a few examples now.

Calculating days remaining until Christmas:

<script type="text/javascript">

//Set the two dates
today=new Date()
var christmas=new Date(today.getFullYear(), 11, 25) //Month is 0-11 in JavaScript
if (today.getMonth()==11 && today.getDate()>25) //if Christmas has passed already
christmas.setFullYear(christmas.getFullYear()+1) //calculate next year's Christmas
//Set 1 day in milliseconds
var one_day=1000*60*60*24

//Calculate difference btw the two dates, and convert to days
document.write(Math.ceil((christmas.getTime()-today.getTime())/(one_day))+
" days left until Christmas!")

</script>

Notice how the year for "Christmas" is dynamically set to the current year (or nextyear if Christmas has already passed for this year), so the script is reusable now and in the future as well without having to modify it.

Calculating time expired since the Millennium (Jan 1st, 2000)

We all remember the Millennium and perhaps even the parties we attended. The following shows how many days has elapsed since then (count up):

<script type="text/javascript">

//Set the two dates
var millennium =new Date(2000, 0, 1) //Month is 0-11 in JavaScript
today=new Date()
//Get 1 day in milliseconds
var one_day=1000*60*60*24

//Calculate difference btw the two dates, and convert to days
document.write(Math.ceil((today.getTime()-millennium.getTime())/(one_day))+
" days has gone by since the millennium!")

</script>

Dynamically indicating what's new on your page:

Finally, how about displaying a "new" image alongside new content that will automatically disappear (the image, that is) after the specified future date has been reached? The logic is simple enough- if the current date is less than the specified future date, write out the "new" image:

<script type="text/javascript">

var newimage='<img src="news.gif">'
var today=new Date()

function whatsnew(yr,mon,day){
var expire=new Date(yr,mon,day)
if (today.getTime()<=expire.getTime())
document.write(newimage)
}

</script>

<!--"New" image will disappear after Dec 30th, 2002-->
<script>whatsnew(2002,11,30)</script> This is new content!

Conclusion

As you can see, it's not difficult at all to do arithmetic on dates in JavaScript, and in the process, derive a whole bunch of useful applications out of it.