Adding jquery datepicker to input text boxes created with document.createElement()

Question

I am trying to add datepicker to new textboxes created using document.createElement().

I am assigning the datepicker to a class called pickDate:

$(function () {

                    $('.pickDate').datepicker({ dateFormat: "dd/mm/yy" });
                });

It works fine with input elements generated on page load.

The function I am using to create new input textboxes contains the following:

function addNew() {...
                    var newDate = document.createElement('input');
                    newDate.type = "input";
                    newDate.id = "date";
                    newDate.className = "pickDate"; .....}

The new textboxes are created fine but no datepicker. From my research online I think I must use onfocus() and bind it? Note: I must use a class instead of id in this example.

Unfortunately I am very new to javascript and jquery and this is as far as I can go. Any variation I try doesn't seem to work.

Answer 1

When you use

$('.pickDate').datepicker()

it is assigning datepicker to every element found that time, but not for every time in the future. In order to provide this functionality to your created inputs, wrap them in a jquery object, and individually assign the datepicker to them in your function

function addNew() {...
  var newDate = document.createElement('input');
  newDate.type = "input";
  newDate.id = "date";
  newDate.className = "pickDate"; 
  $(newDate).datepicker();
.....}

or to leverage jquery more

var count = 0;
function addNew(){
 var newDate = $('<input type="input" id="date'+(count++)+' "class="pickDate"').datepicker();
}

Note: id is meant to be unique, so it should really have some sort of offset if you are creating multiple ones (probably not just an int, this is just to show the concept)

Answer 2

Register it when you add the new form element to the page.

$(document.body).append(newDate);   
$(newDate).datepicker({ dateFormat: "dd/mm/yy" });

Answer 3

Try this

JSFIDDLE

function addNew() {
    var newDate = document.createElement('input');
    newDate.type = "input";
    //  newDate.id = "date";
    newDate.className = "pickDate";
    $("body").append(newDate) + "<br>";
    bindDp(newDate);
}

function bindDp(element) {
    $(element).datepicker({
        dateFormat: "dd/mm/yy"
    });
}

Answer 4

Create the input nCampo = document.createElement('input');

After creating it, you add the function of datepicker $(nCampo).datepicker(); and it should work.

Answer 5

Please try the following code it is working fine for me with document.createElement:

var element7 = document.createElement("input");
element7.type = "date";
element7.id = "datepicker";
element7.size = "10";
element7.name = "datepicker";
element7.setAttribute("onClick", "test('datepicker')");
cell7.appendChild(element7);

In JavaScript:

Function test (datepicker) {

    $(function() {
        $("#" + datepicker).datepicker();
    });

}