JQuery DatePicker Plugin

I had the need for a calendar datepicker in a recent project and could not use Coldfusion’s input datefield. I am building the form on the fly and loading form elements from a database using a CFC and a bunch of convoluted logic.
So the cfcalendar.js would not work with my form. I think because the Form Element does not exist in the DOM just yet.

I turned to a couple of Jquery tools and found this one to be the best. Thanks to its author, Keith Wood.

I still had the issue that when I loaded the date field to the form the Javascript would not recognize it in the Dom until someone either clicked it or another action set its focus. Even then the script is sometimes slow to load the calendar app.

I did have to modify the date field and the javascript a little to make it work. It is here should anyone else run into this issue.


HTML element in the database
<label>:Submit Date</label>:
<input type=”text” name=”submit_date” id=”submit_date” onClick=”doPickDate(this.id);” />:
// I added the onClick event to make it call a javascript function defined on my main page.
 
Javascript
function doPickDate(thisid){
var fthisid = '#'+thisid;
$(function(){
$( fthisid).datepick();
}
);
}

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, Javascript, JQuery, Problems & Fixes. Bookmark the permalink.