Popup Calendar 1.1 - DHTML Lab | 4 | WebReference

Popup Calendar 1.1 - DHTML Lab | 4


Logo

Pop-up Calendar 1.1
Dealing with blank date fields



Note

This page uses DHTML Lab Popup Calendar 1.1 (the new version) in order to demonstrate the new feature. Problems discussed on the previous pages are fixed in this version.

Clearing a Regular Date Input Field

In our first example below, we have an input field defined by this HTML:

<input type="text" id="input_1" size="12" value="Sep-16-2004">

The user can enter a date either with the calendar popup or by typing directly into the input element.

If, for any reason, users want to delete the date and leave a blank input, they can just use the keyboard to blank the input.

Try it: calendar

Not Clearing a Readonly Date Input Field

In our second example, the input field is defined by this HTML:

<input type="text" id="input_1" size="12" value="Sep-16-2004" readonly>

The user can enter a date only with the calendar popup. No manual keyboard entry is allowed, since the input is read only.

If users want to delete the date and leave a blank input, they cannot.

This setup is very popular because it avoids any validation problems. The date is always entered in correct format from the popup.

Try it: calendar

Clearing Any Date Input Field

In this final example, the input field is again defined as read only:

<input type="text" id="input_1" size="12" value="Sep-16-2004" readonly>

DHTML Lab Popup Calendar 1.1 introduces new optional attributes that build a button under the popup calendar, allowing users to clear the input field.

Try it: calendar



The new attributes are descriped on the next page.



Send a comment or suggestion to Peter Belesis

Created: September 07, 2004
Revised: September 07, 2004

URL: http://webreference.com/dhtml/column69/4.html

Justtechjobs.comFind a programming school near you






Online Campus Both