1. Home
  2. Computing & Technology
  3. JavaScript

Selecting Today's Date

Join the Discussion

Questions? Comments?

There are a number of reasons why you might need to have a date entered in a form. Since date formats vary around the world you probably don't want your visitors typing in their selected date since that can be open to misinterpretation. Instead we can provide three drop down lists to individually select the day, month, and year. Alternatively you may prefer to substitute an input field to allow the year to be entered rather than selected if the range of possible years that may be selected is more than just a few.

The following code can be used to create a date selection option as three drop down lists. Just expand the year options are required or replace the year select with an input field. (If you require a Y/M/D or M/D/Y arrangement then just swap the select fields around).

In some instances you may have no way to predict the date that your visitors will select (eg. when asking for their date of birth). Other times there will be a particular date that you expect most visitors to select but where you still need to cater for some of your visitors wanting to select a different date. In these instances we can make it easier for our visitors by having the most commonly selected (or default) date selected when the page is first displayed. Where the default date is fixed this can easily be achieved by adding selected="selected" to the appropriate options. Where the default date changes over time we use a simple Javascript to set the default date instead. Let's assume that we want to set the default to today's date. We want to set the default when the page first loads so we need to add onload="initdt(document.myform);" to the body tag of our page (substitute whatever the name of your form is for myform).

Next we add the following Javascript within the head section of our page to actually set the default date values.

function initdt(mf) {
var t = new Date;
mf.day.value = t.getDate();
mf.month.value = t.getMonth() + 1;
mf.year.value = t.getFullYear();
}

The result of all of the above code gives us date fields that look like this.

This code is easily modified to set a default date that is a given offset from todays date (eg. exactly two weeks time or the end of next month) all we need to do is to add the appropriate date manipulations on the date contained in t immediately after the first line of the Javascript.

Note that this code does not work with Opera 5 or Netscape 4. With those browsers the 1st January 2003 (or whatever you have as the earliest year) will be displayed.

Note that the script and the description of how to set it up are copied from the "Ask Felgall" website with the permission of the copyright owner.

Explore JavaScript

More from About.com

  1. Home
  2. Computing & Technology
  3. JavaScript
  4. Validating Forms
  5. Yet More Validations
  6. Selecting Today's Date

©2008 About.com, a part of The New York Times Company.

All rights reserved.