JavaScript: Dates

 

The Date Object

You use the Date object when you want to work with dates and times. In Lesson 3 we saw how to define an object that stores the current time, and how to extract useful information from the object. For example, these lines store the current hour in the variable 'hoursNow':

var now = new Date()
hoursNow = now.getHours()

We also touched on how it is possible to define a Date object for any given date and time. For example, say we want to define a Date object for January 1, 2001. Here is how we could do that:

var newYearsDay = new Date()
newYearsDay.setYear(2001);
newYearsDay.setDate(1);
newYearsDay.setMonth(0);
//recall that January is month 0, February is month 1, etc.

If you need a review of working with the Date object, it would be a good idea to look over Lesson 3 before proceeding.

 

Days Until Your Next Birthday

Let's work on a script that will figure out how many days it is until the viewer's next birthday. In a form, we ask the viewer for the month and date of her birthday. The names of these form elements are 'month' and 'date,' respectively.

We need a Date object with the current date and time. We can start with

var now = new Date()

Recall that we obtain the number of milliseconds that have passed since January 1, 1970 with the command

secsNow = now.getTime();

and we obtain the current year, month and date with

yearNow = now.getFullYear();
monthNow = now.getMonth()+1;
dateNow = now.getDate();

We define a new Date object with the month and date of the viewer's birthday:

var birthday = new Date();
birthday.setMonth(form.month.value-1);
birthday.setDate(form.date.value);

where 'form' is the form object that has been passed to the function by using the 'this.form' syntax in an onClick() command.

We next have to figure out whether to set 'birthday' to the current year or next year, depending on whether or not the viewer's birthday has already taken place this year:

if(form.month.value < monthNow)

birthday.setYear(yearNow+1);

else if(form.month.value > monthNow)

birthday.setYear(yearNow);

The following lines handle the case in which the current month is the same as the month of the viewer's birthday:

else

if(form.date.value < dateNow)

birthday.setYear(yearNow+1);

else

birthday.setYear(yearNow);

Next we calculate how many days there are between the current day and the time input by the viewer. The variable 'secsNow' we've already defined above. The variable 'secsBirthday' similarly stores the number of milliseconds that pass between January 1, 1970 and the viewer's next birthday:

var secsBirthday = birthday.getTime();

To figure out how many days are represented by this number of milliseconds, we calculate the number of milliseconds in a day ('milliSecsInDay'). We then calculate the number of milliseconds between today and the viewer's next birthday, and divide the result by 'milliSecsInDay'.

milliSecsInDay = 1000*60*60*24;
days = (secsBirthday-secsNow)/milliSecsInDay;

Finally we round off our result, and assign it to the form element named 'daysUntil':

days = Math.round(days);
form.daysUntil.value = days;

 

The Full Monty

Here is the full script:

function figureItOut(form)
{
var now = new Date();
secsNow = now.getTime();
dateNow = now.getDate();
monthNow = now.getMonth()+1;
yearNow = now.getFullYear();
var birthday = new Date();
birthday.setMonth(form.month.value-1);
birthday.setDate(form.date.value);
if(form.month.value < monthNow)
   birthday.setYear(yearNow+1);
else if(form.month.value > monthNow)
   birthday.setYear(yearNow);
else
if(form.date.value < dateNow)
   birthday.setYear(yearNow+1);
else
   birthday.setYear(yearNow);
var secsBirthday = birthday.getTime();
milliSecsInDay = 1000*60*60*24;
days = (secsBirthday-secsNow)/milliSecsInDay;
days = Math.round(days);
form.daysUntil.value = days;
}

//-->
</script>
</HEAD>

<BODY>
<h4>Choose your birthday:</h4>
<form>

Month:
<select name=month>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
<option value=10>10
<option value=11>11
<option value=12>12
</select>

Date:
<select name=date>
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
<option value=7>7
<option value=8>8
<option value=9>9
<option value=10>10
<option value=11>11
<option value=12>12
<option value=13>13
<option value=14>14
<option value=15>15
<option value=16>16
<option value=17>17
<option value=18>18
<option value=19>19
<option value=20>20
<option value=21>21
<option value=22>22
<option value=23>23
<option value=24>24
<option value=25>25
<option value=26>26
<option value=27>27
<option value=28>28
<option value=29>29
<option value=30>30
<option value=31>31
</select>

<p>
<input type=button value="Click" onClick="figureItOut(this.form);"> to find the number of days until your next birthday.>
<p> </p>
<p>The number of days until your next birthday is: 
<input type=text name=daysUntil size=3
</form>

to see this how this script behaves in a new window.

 

Other Resources

Try these links on dates and forms:


Page Link
Form and Function www.htmlgoodies.com/primers/jsp/article.php/3478291
Dates and Times www.htmlgoodies.com/primers/jsp/article.php/3478431
Countdown to the Holidays javascript.about.com

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on your own web page or eEverything.com. If you work on eEverything.com, create a calculator (for the pajamas section of the website) that figures out how many hours and minutes until the viewer goes to bed for the night. Instead of month and year (as was used in the example above) ask the viewer for the hour and minute of his bedtime, and then do the calculation. There are different ways of doing this calculation. The calculation should take place inside a function.

Use a form to record the viewer's bedtime, and pass the form to the function as we did in the example above, using the 'this.form' syntax.

If you work on your own page, implement this calculator or something similar.