Selecting Today's Date

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).

<select name="day" id="day"><option value="1">1st</option><option value="2">2nd</option><option value="3">3rd</option><option value="4">4th</option><option value="5">5th</option><option value="6">6th</option><option value="7">7th</option><option value="8">8th</option><option value="9">9th</option><option value="10">10th</option><option value="11">11th</option><option value="12">12th</option><option value="13">13th</option><option value="14">14th</option><option value="15">15th</option><option value="16">16th</option><option value="17">17th</option><option value="18">18h</option><option value="19">19th</option><option value="20">20th</option><option value="21">21st</option><option value="22">22nd</option><option value="23">23rd</option><option value="24">24th</option><option value="25">25th</option><option value="26">26th</option><option value="27">27th</option><option value="28">28th</option><option value="29">29th</option><option value="30">30th</option><option value="31">31st</option></select> <select name="month" id="month"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">Jul</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select> <select name="year" id="year"><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2015">2015</option></select>

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. To set the select lists to default to today's date we simply add the following JavaScript at the bottom of the page:

(function() {
var t = new Date;
document.getElementById('day').value = t.getDate();
document.getElementById('month').value = t.getMonth() + 1;
document.getElementById('year').value = t.getFullYear();

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

We have today's date displayed but still allow the visitor to select any date within the specified year range.

This code is easily modified to set a default date that is a given offset from today's 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.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow