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.

You got to apply it when you build it.

epascarello
– epascarello

2014-05-06 18:55:05 +00:00
Commented May 6, 2014 at 18:55 — epascarello
– epascarello, Commented May 6, 2014 at 18:55

Travis J · Accepted Answer · 2014-05-06 18:55:50Z

3

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)

answered May 6, 2014 at 18:55

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aazzaawwaazzaa Over a year ago

Thank you for the clear explanation. Can't believe it's something so simple. Need to spend some time learning javascript and jquery!!

epascarello · Accepted Answer · 2014-05-06 18:56:04Z

1

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

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

answered May 6, 2014 at 18:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Bugs · Accepted Answer · 2018-03-01 17:24:16Z

1

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"
    });
}

edited Mar 1, 2018 at 17:24

Bugs

4,4799 gold badges34 silver badges41 bronze badges

answered May 6, 2014 at 18:58

maj

5825 silver badges8 bronze badges

Comments

Bugs · Accepted Answer · 2018-03-01 17:22:03Z

0

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

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

edited Mar 1, 2018 at 17:22

Bugs

4,4799 gold badges34 silver badges41 bronze badges

answered Mar 1, 2018 at 17:20

Apdul Apdul

1

1 Comment

Bugs Over a year ago

Please post in English in future. I've translated what I can so please do check it over. Thank you.

Bugs · Accepted Answer · 2018-03-01 17:23:54Z

0

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();
    });

}

edited Mar 1, 2018 at 17:23

Bugs

4,4799 gold badges34 silver badges41 bronze badges

answered Jan 12, 2015 at 12:49

rajkumar chilukuri

2551 gold badge3 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related