Javascript: Popup Calendar Control

On several occasions when developing web applications it is necessary to have users provide dates as input. There are several ways to have the user input a date in an HTML form: enter as text, select from drop down list, choose from a calendar, etc.

ECN has developed a simple Javascript Popup Calendar Control which can be tied to a text field in a form to collect dates from the user. If the javascript is not supported by the users' browser or they have chosen to disable it, dates can still be entered by typing a date into the text field.

Example

Click in the text field below to see an example of the javascript popup calendar control. Note: if the form control does not appear you may have javascript disabled or your browser my not be supported.

Using the Control in your own applications

Two external source files must be included in your web page to take advantage of the javascript popup calendar control. One is a javascript file which defines the functionality of the calendar control, the other is a style sheet which defines the look of the calendar pop up. You can create your own version of the style sheet if you would like to change the appearance of the pop up.

To link the style sheet and javascript files include the following code in your page:

<link href="/ECN/Ztools/CalendarControl/CalendarControl.css"
      rel="stylesheet" type="text/css">
<script src="/ECN/Ztools/CalendarControl/CalendarControl.js"
        language="javascript"></script>

The link tag may be included in the header of your document, the script tag must always reside within the body. Once you've included these two files it is a simple matter to add Calendar Popup Controls to your form fields.

Add an onfocus attribute to your input tags which calls the showCalendarControl function. Below is an example:

<input name="todays_date"
       onfocus="showCalendarControl(this);"
       type="text">

That's it, users can now input dates into your form fields in a consistent format from an easy to use interface. Please send suggestions for improvement to webmaster@ecn.purdue.edu.

Source Code:

• CalendarControl.js
• CalendarControl.css

This code is for use by Purdue University staff, students, and departments. It is not licensed for public download.