jquery datepicker not working on dynamically created html

Question

I'm creating dynamically a couple of div with inner controls. Two of those controls should be datepickers. But for some reason they are not showing (only input text are shown) It works if I create static html, but not when I'm using dynamic one.

This is the code I'm using to generate the HTML (I can see the div)

var ShowContainerDiv = document.createElement('DIV');  var btnShowDiv = document.createElement('DIV'); btnShowDiv.id = 'btnShowDiv '; btnShowDiv.title = 'Change'; btnShowDiv.index = 120;  var lblShow = document.createElement('label') lblShow.htmlFor = "btnShowDiv"; lblShow.appendChild(document.createTextNode('Show')); btnShowDiv.appendChild(lblShow ); btnShowDiv.onclick = function () {     dropdown.style.visibility = "visible"; };  var dropdown = document.createElement('DIV'); dropdown.style.backgroundColor = 'white'; dropdown.style.borderStyle = 'solid'; dropdown.style.borderWidth = '2px'; dropdown.style.cursor = 'pointer'; dropdown.style.textAlign = 'left'; dropdown.style.width = '150px';  var chkRed = document.createElement("input"); chkRed.type = "checkbox"; chkRed.id = "chkRed"; chkRed.value = "Red"; chkRed.checked = false; var lblRed = document.createElement('label') lblRed.htmlFor = "chkRed"; lblRed.style.color = "#F00"; lblRed.appendChild(document.createTextNode('Red'));  var chkYellow = document.createElement("input"); chkYellow.type = "checkbox"; chkYellow.id = "chkYellow"; chkYellow.value = "Yellow"; chkYellow.checked = false; var lblYellow = document.createElement('label') lblYellow.htmlFor = "chkYellow"; lblYellow.style.color = "#FF0"; lblYellow.appendChild(document.createTextNode('Yellow'));  var chkGreen = document.createElement("input"); chkGreen.type = "checkbox"; chkGreen.id = "chkGreen"; chkGreen.value = "Green"; chkGreen.checked = false; var lblGreen = document.createElement('label') lblGreen.htmlFor = "chkGreen"; lblGreen.style.color = "#0F0"; lblGreen.appendChild(document.createTextNode('Green'));  var dateFrom = document.createElement("input"); dateFrom.id = "txtDateFrom"; dateFrom.type = "text"; dateFrom.className = "datepicker"; dateFrom.style.width = "70px"; dateFrom.readonly = "readonly"; var lblDateFrom = document.createElement('label') lblDateFrom.htmlFor = "txtDateFrom"; lblDateFrom.appendChild(document.createTextNode('From'));  var dateTo = document.createElement("input"); dateTo.id = "txtDateTo"; dateTo.type = "text"; dateTo.className = "datepicker"; dateTo.style.width = "70px"; dateTo.readonly = "readonly"; var lblDateTo = document.createElement('label') lblDateTo.htmlFor = "txtDateTo"; lblDateTo.appendChild(document.createTextNode('To'));  var btnDone = document.createElement("input"); btnDone.type = "button"; btnDone.name = "btnDone"; btnDone.value = "Done"; btnDone.onclick = function () {     dropdown.style.visibility = "hidden"; };  dropdown.appendChild(chkRed); dropdown.appendChild(lblRed); dropdown.appendChild(document.createElement("BR")); dropdown.appendChild(chkYellow); dropdown.appendChild(lblYellow); dropdown.appendChild(document.createElement("BR")); dropdown.appendChild(chkGreen); dropdown.appendChild(lblGreen); dropdown.appendChild(document.createElement("BR")); dropdown.appendChild(dateFrom); dropdown.appendChild(document.createElement("BR")); dropdown.appendChild(dateTo); dropdown.appendChild(document.createElement("BR")); dropdown.appendChild(btnDone);  ShowContainerDiv.appendChild(btnShowDiv); ShowContainerDiv.appendChild(dropdown);  g.event.addDomListener(btnShowDiv, 'click', function () {     dropdown.visible = true;     dropdown.style.visibility = "visible"; });  g.event.addDomListener(btnDone, 'click', function () {     dropdown.visible = false;     dropdown.style.visibility = "hidden"; });  map.controls[g.ControlPosition.TOP_RIGHT].push(ShowContainerDiv); 

Then in a .js file I have this (I checked and I'm including the file)

$(document).ready(function () {     $(".datepicker").datepicker({         dateFormat: 'yy/m/d',         firstDay: 1,         changeMonth: true,         changeYear: true,         showOn: 'both',         autosize: true,         buttonText: "Select date",         buttonImage: '../Content/images/calendar.png',         buttonImageOnly: true     }); }); 

Why the datepicker is not showing up?

Answer 1

When you write

$(document).ready(function () {     $(".datepicker").datepicker({...}); }); 

This fragment is getting executed right after the page has loaded. Therefore, your dynamic datepickers are not there yet. You need to call $(aSuitableSelector).datepicker(...) on each newly-inserted element. First, use a var to hold your options:

var datePickerOptions = {     dateFormat: 'yy/m/d',     firstDay: 1,     changeMonth: true,     changeYear: true,     // ... } 

This allows you to write

 $(document).ready(function () {     $(".datepicker").datepicker(datePickerOptions);  }); 

and to write

 // right after appending dateFrom to the document ...  $(dateFrom).datepicker(datePickerOptions);   //...   // right after appending dateTo ...  $(dateTo).datepicker(datePickerOptions); 

You can also use JQuery's ability to listen to DOM changes to avoid having to apply JS magic to newly-inserted elements -- but I do not think it is worth it.

Answer 2

The easiest way I found to add datepicker for dynamically added multiple input field:

    $('body').on('focus',".datepicker", function(){         $(this).datepicker();     });