Steve's Ultimate JavaScript Date Library

The reference page for this library lists all of the new methods that the library adds to all your date objects but doesn't show you how to use those methods. Anyone with a reasonable level of JavaScript knowledge should be able to figure out how to use them for themselves but for those who are beginners with JavaScript I have decided to produce a few examples of code that uses the library to show you how you can incorporate the library into your scripts. Let's break the examples up into the same categories I used for the reference page.

The first step for any of the code to work is to add the library to the head of your page using:

<script type="text/javascript" src="datemethods.js">

In each example I will include the code which will actually plug the result right into the page output (provided that the example script is included either inside a script tag at the bottom of the body of the page or in an external script linked to the bottom of the page). You just need a tag within the page with the specified id.

Update Dates and Times

All these methods work the same way so I'll just include two examples.

Example 1: What is the date in 15 days time?

var today = new Date();
document.getElementById('d15').innerHTML = today.format('jS F, Y');

And the answer is .

Example 2: What was the time three hours ago?

var today1 = new Date();
document.getElementById('h3').innerHTML = today1.format('g:i:sa');

And the answer is .

Note that in this second example we subtracted three hours by passing minus three into the addHours method. That's why we don't need separate subtract methods.

Compare Dates and Times

For comparing dates and times we will of course need more than one date object and will pass one into the method for the other.

The day difference and business day difference methods work exactly the same way except for which days they count.

Example 3: How many business days have there been so far this year?

var today2 = new Date();
var lastyear = new Date(today2.getFullYear()-1,11,31);
document.getElementById('bus').innerHTML =

And the answer is .

Note that I just used the existing getFullYear() method and subtracted one from it in setting the value of lastyear to the 31st December of last year as the new methods for adding periods are for updating an existing date and are not necessary when we are copying parts of one date to set up another. Note also that when setting dates using multiple numbers the value for the month is always one less than the actual month number of the date and so we have 11 for December.

Note also that you could also use lastyear.busDayDiff(today2) and get the same answer.

Example 4: How old is someone who was born on 5th July 1950?

var today3 = new Date();
var dob = new Date(1950, 6, 5);
document.getElementById('age').innerHTML =

And the answer is .

Note that this does not increment their age by another year until their exact birthday is reached so it will report the age as one year less on 4th July to what it does on 5th July for someone whose birthday is on that date.

Date Formatting

You have already seen a couple of simple examples of using the date format method in the first two examples above where I used it to format the results from the other calculations. Here's some more for you though so as to show just how flexible this method is.

Example 5: The current date and time in a number of different formats

var today4 = new Date();
document.getElementById('d1').innerHTML =
   today4.format('l, jS F Y h:i:sa P');
document.getElementById('d2').innerHTML =
document.getElementById('d3').innerHTML =
document.getElementById('d4').innerHTML =
document.getElementById('d5').innerHTML =
   today4.format('J ^a^n^d B');

And the answers are:

Both Julian day and Swatch beats are always the same everywhere around the world with the Julian day always changing between 458 and 459 beats. (So beat 458 overlaps the end of one Julian day and the start of the next). Obviously if you don't know what Julian days and Swatch beats are you will not use those options and it is unlikely that they'd be used together like this but then this is just a way to demonstrate the power of this method.

You should be able to work out how to use the format method to extract whatever information you want about a date and time based on these examples. Note that the information will be with regard to whatever date and time that the date objects hold, I just used the current date and time to keep it simple.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow