<!-- JavaScript

Application of the Date Object

We have seen the basic rules and how to create and manage Date objects. Let's now have a look at some of the applications of the date object.

First we will have a look at how to make a clock using the Date object in JavaScript.


The above lines are to get the exact time in our defined variables.

We will now look at a bit of basic formatting for the time being displayed. Since the value of the variables in m and s could be single digits we add a 0 before the digit on the fulfillment of the following conditions.


The above 2 lines are pretty much the main lines for displaying the time. The first one is for displaying the clock within the form having a text field with name time and the name of the form being form1.

The setTimeout( ) function is used to recursively call the Start( ) function every 1000 milliseconds so the form keeps getting updated.

All the above will be included in a function called Start( ).

The HTML source will pretty much be the next few lines, short and sweet.


Pretty easy isn't it? We can now take a look on how to manipulate and change dates. Add, subtract days from the current date or a set date is quite easy if you know how to handle the Date object.

Lets take the following code for example:


The above code is used to first obtain the current date using the getDate( ) function and that date is subtracted by 1 and set using the setDate( ) method to store it in the variable aDate.

To print the changed date we simply add a document.write(aDate) statement.

We can see the output as below:


Similarly we can even add dates but changing the - 1 or + 3 or anything.

To calculate days between two different dates

First of all we shall make a few assumptions and set our guidelines. We will calculate the difference with respect to number of days between the two dates using the milliseconds parameter.


The above line will convert One-day into number of milliseconds. We will now make use of the getTime( ) function of the Date object we had discussed in the previous topics. The getTime( ) fuction returns the number of milliseconds since January 1 1970.


The above lines will first calculate the milliseconds between that particular date and January 1 1970. Then we can subtract both those values to get their internal difference in milliseconds too. The abs( ) function of the Math object is used as we don't know which of the date comes later date1 or date2. So this function can be considered as generalized.


The difference in milliseconds between the dates is stored in diff, which is divided by num_milli to get the number of days. The Math.floor will round the number downwards to the closest integer.

Making a calendar

Let's have a look on how to make a basic calendar, it is not going to include the entire code i.e., the formatting and css, but will show you exactly how to handle the variables and loops.


These two lines will create the arrays for the day and month for proper display.


The above code will display the current month and the year.

We must now look at printing the days of the week and then the all the dates respective to the days. After that bolding the today's date out of all the other dates on the current month will complete our calendar.


This will print the days of the week on the top.

Now we will just print the dates of the month and today's date will be formatted differently, here we bold it so it can be noticed.


To keep this loop running for all the dates and printing it, we make use of:


The above statement will be included at the end of the loop for printing the next date. You can simply now add CSS or Tables to make it look good and format is correctly.