I've been using the nifty date chooser widget in ColdFusion 8 and love it. Using the <cfform> tag and a <cfinput> tag you simply add the type="datefield" and mask="MM/DD/YYYY". You'll see a small image of a calendar appear next to your input form and when you click on it a nice calendar date chooser will appear.

My problems begain when I tried to use this same code inside a .cfm page and used the bind (cfdiv) or source (cfwindow) attribute to point to this separate page. The small calendar image would not appear. I thought this had something to do with the asynchronous nature of cfdivs and cfwindows.

But, I've descovered the problem.

1. I did not map the CFIDE directory and instead copied all the content of /CFIDE/scripts/ into a directory off the root called /js/cf8/. Then I used <cfajaximport scriptSrc="/js/cf8" tags="cfform,cfdiv,cfinput-datefield">. This SHOULD work. But it didn't. Thanks to the FireBug plug-in (Love this plug-in, if you don't have it running in Firefox 3 get it now). Firebug allowed me to see the source of my external.cfm file. I found the problem.

Here is the image tag for my main page calendar icon.

<img id="myDatemyForm_cf_button" src="/js/cf8/ajax/resources/cf/images/DateChooser.png"/>

And here is the image tag for my external page calendar icon.

<img id="myExternalDatemyExternalForm_cf_button" src="/CFIDE/scripts/ajax/resources/cf/images/DateChooser.png"/>

No good!

So, my solution. Create the directory "/CFIDE/scripts/ajax/resources/cf/images/" off my webroot and copy the image contents.

Voila! the calendar image appears and the date chooser works great.

Happy coding.