Popup Calendar 1.1 - DHTML Lab | 4

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:

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:

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:

The new attributes are descriped on the next page.