Quick and Dirty Date Differences with JavaScript - The Article
(Page 2 of 2 )
Lets begin this tutorial by getting to the heart of it:
Date.getTime()
Date.getTime() is a prebuilt JavaScript 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!
On 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:
<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(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 JavaScript examples shows how many days has elapsed since the launch of our site:
<script type="text/javascript">
//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!")
</script>
Yes, this tutorial is short and to the point, and hopefully I’ve provided you with enough source code to feel comfortable dabbling with dates in JavaScript!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 9 
