DevBuilder Dev Articles News Articles DevBuilder Forum Code Login Sign Up
Username:  Password:    
 

Add Your ResourcesAdd Your Resource   Write the reviewsPost Review   Read the reviewsRead Reviews   Printer friendly versionPrint  

Rate This Article

Calculating date differences using JavaScript Article Rating:

In this tutorial, I'll discuss how to calculate the difference between two dates using JavaScript. The potential applications on this 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!

Lets begin this tutorial by getting to the heart of it:

Date.getTime()

Date.getTime() is a prebuilt JS method that returns the time elapsed from January 1st, 1970 to the current Date instance, in milliseconds. 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-
1) Convert both dates to a number using Date.getTime()
2) Then 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
//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, so the script is reusable now and in the future as well without having to modify it. Our annual events countdown script uses this concept to count down to any annual event (ie: a holiday, birthday etc) of your choosing.

-Dynamically indicating what's new on your page:

Moving on, 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:

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> whatsnew(2003,11,30) </script> This is new
content!

-Calculating time expired since a particular past date

Finally, it's just as easy to count up as it is to count down. The following shows how many days has elapsed since the launch of our site:

//Set the two dates
var millennium =new Date(1997, 5, 11) //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 JavaScriptKit.com started!")

It illustrates counting up from a date.



Add Your ResourcesAdd Your Resource   Write the reviewsPost Review   Read the reviewsRead Reviews   Printer friendly versionPrint  

Rate This Article