Home arrow JavaScript arrow Page 2 - Quick and Dirty Date Differences with JavaScript
JAVASCRIPT

Quick and Dirty Date Differences with JavaScript


Working with date differences in JavaScript is a tad fiddly. In this article George shares some source code to ease the pain...

Author Info:
By: JavaScript Kit
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
July 07, 2003
TABLE OF CONTENTS:
  1. · Quick and Dirty Date Differences with JavaScript
  2. · The Article

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials