Popup Calendar 1.2 - DHTML Lab | 5 | WebReference

Popup Calendar 1.2 - DHTML Lab | 5


Pop-up Calendar 1.2
Separate <select> list elements

The date_format attribute

When using a <select> element for any date component, the value of the date_format attribute is irrelevant. Do not, however, delete the default value from the external script itself. It is still used internally, for statement economy.

Date and Year

If you use a <select> element for the date and/or year portion of the complete date, the script will find the option to highlight by comparing the date or year selected by the user to the display text of the contained <option> elements in the list-box.

It is assumed, of course, that the <option> displays for date and year are numeric. For example, the script will not identify the correct date if your <select> element looks like this:



If you use a <select> element for the month portion of the complete date, you must:

1. List all twelve months, even if some do not apply to the user's choice.


2. Ensure that the month list comprises the last twelve options in the list-box.


The script identifies the correct month <option>, not by its displayed text, but by its position in the list-box. Since there are always twelve months in the list, the script identifies the month's position offset from the end of the list, allowing for the use of header <option> elements within the list-box, as in the two list-boxes immediately above.


Here are a few examples of valid <select> list boxes
( drop-down list-boxes are used here to save space, but they could just as well be scrollable list-boxes ):

Default date visible:

Month: Date: Year: calendar

No default date - selectedIndex property set to -1:

Month: Date: Year: calendar

No default date - blank first <option> selected:

Month: Date: Year: calendar

No default date - header <option> elements:


A more minor problem is addressed on the next page.

Send a comment or suggestion to Peter Belesis

Created: October 20, 2004
Revised: October 20, 2004

URL: http://webreference.com/dhtml/column71/5.html

Justtechjobs.comFind a programming school near you

Online Campus Both