 |
ColdFusion Custom Date Input Tag
At work, a client requested the ability to select a date via a popup control on the
web page. The various possible solutions that I found existing did not meet my expectations.
Hense the following ColdFusion custom tag was created. I am very pleased with the results and
I hope you are too! Instead of a regular <INPUT> tag, you use this custom tag. You don't
have to add Javascript routines, all the work is done automatically behind the scenes!
Required Attribute
Just specify the NAME attribute and the VALUE attribute and you have a working tag that as far
as your code goes works just the same as an <INPUT> tag. If you say NAME="test1" in the
custom tag and post to another page, The ColdFusion FORM.test1 variable will contain the value.
Also, if you set VALUE="01/01/2004" in the custom tag, it works just like VALUE= in an INPUT tag.
The only difference being it must be blank or a valid date.
Optional Attributes
In addition to the manditory attributes of NAME and VALUE, you have other attributes at your
disposal, CLASS=, DISABLED, STYLE=. Hence you can disable this control just like a standard HTML
text control, and you can change the style of the control directly or use classes in style sheets!
Additional Attributes:
- BTN_SRC - Alternate URL for calendar button image
- HD_COLOR - Color of calendar header
- SELBGCOLOR - Background color of selected date
- SELFGCOLOR - Foreground color of selected date
- CALCOLOR - Calendar background color for dates
- CALFONTCOLOR - Font color for each date
- BUTTON_EDGE_COLOR - color of button edges on popup
- BUTTON_COLOR - color of control's buttons
- BACK_COLOR - Background color of popup
- CAL_BORDER_COLOR - Border color around dates on calendar
- ONCHANGE - Works like ONCHANGE does for the <SELECT> tag
To see a sample, click Here.
To down load the lastest custom tag (version 2.0) as well as calendar image and instructions, click:
DOWNLOAD.
RELEASE UPDATES
FOR V: 2.0:
| 7/28/05 - | Now if the date control is too low on the page
(the popup gets cut off), the popup will be placed
Above the control instead of Below the control. OC |
| 7/28/05 - | Bug created by ver 1.4 has been fixed. If you clicked
on the text area of the control before clicking on
the popup button, you would get a Javascript error.
This bug has been fixed. OC |
FOR V: 1.4:
| 5/26/05 - | Finally fixed the positioning of the pop-up if its buried in a layer. In the previous version, if the first date control was Not in a layer then the ones in the layers would work. Instead of putting the
date control whereever the first control was placed,
it now puts it right After the BODY tag. Although
in the style I'm using position: absolute (which,
in my opinion, should just work...) it doesn't!
IE is fussy about layering sometimes. If you put
a layer inside the tag, but outside
any tables or other layers, it works just as you'd
expect. Hence the new code to deliberately places
the layer at the top of the page after the <BODY>
tag! OC |
FOR V: 1.3:
| 3/31/05 - | Modified the code that calculates how many days are
in each month. Some subsequent update of Internet
Explorer "broke" the original code. I wrote new code
that is not dependent on the Date object functioning
the way it was assumed before. OC |
FOR V: 1.2:
| 9/30/04 - | Added a Clear button to the calendar popup so a user
can clear out the current date in the control. This
is especially important if a user accidentally picks
a date and then realizes the value should still be
blank! OC |
FOR V: 1.1:
| 9/27/04 - | Changed CALLER to REQUEST variable to eliminate
problems with using this custom tag inside another
custom tag. OC |
| 9/27/04 - | Added javascript to change z-order of popup so it
will show properly when tag embedded on
a lower layer. OC |
| 9/27/04 - | Added READONLY attribute, works like READONLY on
normal INPUT tag. |
| 9/27/04 - | Added LOCKED attribute, use for dynamically disabling control.
(See readme file for more info on disabling control) |
| 9/27/04 - | Add ONCHANGE attribute. Works like ONCHANGE attribute of a
SELECT tag. Use javascript in this tag the same way.
So, now you can run javascript to do something when user picks
a date! (even supports the 'this' object) |
KNOWN ISSUES:
• This "control" has only been tested in Microsoft Internet Explorer, it probably
does not work in other browsers.
ARCHIVES
Here is where you will find previous versions:
• Version 1.4
• Version 1.3
• Version 1.2
• Version 1.1
• Version 1.0 (Original Version)
This script is on the Web Scripts Directory:
|