UI. Datepicker.

Hey,
I'm trying to create a new element for each row of a table(jqgrid)
that I create dynamically. I can't get the datepicker to work. I have
gotten datepicker to work but it was on an element that was created in
the html.
I've tried to create the element a few different ways.
//Using a textarea - nothing happens.
var calText = document.createElement("textarea");
$(calText).attr({ id: "calText", name: "calText", css: "date-pick" });
$(calText).text("Text");
$(calText).datepicker({ clickInput: true });
jQuery("#list").setCell(rowNum, "Promised", calText, { 'text-align':
'center' });
//create a text element. nothing happens
var calText = document.createElement("text");
$(calText).html("<input id='calText' name='calText' type= 'text'
style='width: 95px' value='Click To Set'/>");
$(calText).datepicker();
//$(calText).onclick = function() { $(calText).datepicker(); };
jQuery("#list").setCell(rowNum, "Promised", calText, { 'text-align':
'center' });
//create a div element. In the cell the calendar is displayed before
the text box is clicked. Also
// when selecting a date it doesn't sent it to the textbox.
var calText = document.createElement("div");
$(calText).html("<input id='calText' name='calText' type= 'text'
style='width: 95px' value='Click To Set'/>");
$(calText).datepicker();
jQuery("#list").setCell(rowNum, "Promised", calText, { 'text-align':
'center' });
I'm not sure if I'm creating the element wrong or not setting
something.
Any help would be greatly appreciated.