Date Selector

Do you want to provide an easy way for your visitors to enter dates into your form? What about displaying a calendar directly under the date input field and allowing your visitors to select the date from there if they don't want to type it in themselves.

Here is an example (I've just put the date field itself into this form but you can add as many other fields as you want in your forms).

You can either type directly into the input field or click on a date in the calendar to load that date into the form field. The arrow links under the calendar allow you to change the displayed calendar by one month or one year in either direction each time you select them. If your visitor's browser doesn't support Javascript then the calendar doesn't display but the date field is still available for input.

First let's give the input field that is going to contain the date an id if it doesn't already have one and add a div immediately after the input field to display the calendar in. This div will also need an id. The above example form includes the following code for the input and calendar:

<label for="calDate">Date</label>
<input type="text" name="calDate" id="calDate" size="18"/>
<div id="cal"></div>

Next we need the script to add the selector calendar to the input. This script makes use of my extended date script so the first thing you need to do is to grab that script. You also need the following script that actually uses the extended date functionality to display the calendar and format the selected date in the input field.

JavaScript

As you can see this script isn't very long because it is making use of the common date functionality that the extended date script provides via $D.

Both of these scripts need to be attached to the bottom of your web page immediately before the </body> tag with the dollarD.js script coming first.

If you look at the bottom of the script you will see that we pass four parameters into the script. The first is the $D extended date object defined in the other script and the second and third are the ids we entered in the div tag and input tag respectively. The fourth parameter allows us to define what format that the selector will use for the date it inserts into the input field and the values for this are defined with the extended date script (or if you already know PHP the codes are almost the same as you'd enter in the PHP date format command).

The last thing that you need to do is to copy the following and attach it into the head of your page with the rest of your page styles. All of these styles are defined to be specific to the id="cal" div so that they will not interfere with the rest of your styling of the page.

CSS

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate