Add calendar datepicker with Jquery on dynamic table.

Question

I am trying to add a Jquery calendar picker to a text box at the time of creation, but I cant find how.

When I press a button, it will create a table, the element I want to attach the Jquery calendar picker is:

var txtDate = createTextInput(i, "txtDate", 8, 10);
txtDate.className  = "datepicker";
this.newcells[i].appendChild(txtDate);

I tried adding at the end :

txtDate.datepicker();

But does not work. Can anybody help?

Thanks.

Note: CreateTextInput is:

function createTextInput(i, strName, size, maxLength) {
    var input = document.createElement('<input>');
    input.type = "text";
    input.name = strName;
    input.id = strName + i;
    input.size = size;
    input.maxLength = maxLength;

    return input;
}

Answer 1

If createTextInput is returning a plain DOM node instead of a jQuery object, you need to use $() on the result.

$(txtDate).datepicker();

Answer 2

$(txtDate).datepicker();

Answer 3

Use

$("#txtDate").datepicker();

instead of

txtDate.datepicker();

You can create an element using jQuery with ease. Something like

$("<input type='text' />").attr("id", '').appendTo("yourelement");

You can rewrite the createtextinput function like this in jQuery

function createTextInput(i, strName, size, maxLength) {
    return $("<input />".attr({
        type: 'text',
        name: strName,
        id: strName + i,
        size: size,
        maxLength: maxLength
    });    
}

If you are returning the jQuery object then you can directly call datepicker(), like

txtDate.datepicker();