Rashid Reza Rashid Reza - 2 months ago 11
jQuery Question

While I am using the date picker function in innerhtml the date picker does not work

Html code:

var td5 = document.createElement("TD")
var strHtml5 = "<From><INPUT Id=\"one\" CLASS=\"datepicker\" type=\"Text\" readonly=\"true\">";
td5.innerHTML = strHtml5.replace(/!count!/g,count);

var td6 = document.createElement("TD")
var strHtml6 = "<To><INPUT Id=\"two\" CLASS=\"datepicker\" type=\"Text\" readonly=\"true\">";
td6.innerHTML = strHtml6.replace(/!count!/g,count);


Here is the date picker function

$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
depth: "year",
showOn: 'both',
buttonImage:'../../resources/theme1/image/calendar.png',
buttonImageOnly: true,
disabled: true,
});
});

Answer

You can store datepicker initialization object as a global variable and can use it later whenever new datepicker elements are appended.

Try this:

//GLOBAL_INIT will hold the initialization in global context to be used later
var GLOBAL_INIT = {
  changeMonth: true,
  changeYear: true,
  depth: "year",
  showOn: 'both',
  buttonImage: '../../resources/theme1/image/calendar.png',
  buttonImageOnly: true,
  disabled: true,
};


var td5 = document.createElement("TD")
var strHtml5 = "<From><INPUT Id=\"one\" CLASS=\"datepicker\" type=\"Text\" readonly=\"true\">";
td5.innerHTML = strHtml5.replace(/!count!/g, count);

var td6 = document.createElement("TD")
var strHtml6 = "<To><INPUT Id=\"two\" CLASS=\"datepicker\" type=\"Text\" readonly=\"true\">";
td6.innerHTML = strHtml6.replace(/!count!/g, count);
//Will initialize when elements are appended
$(strHtml5).datepicker(GLOBAL_INIT);
$(strHtml6).datepicker(GLOBAL_INIT);


//Will initialize `'.datepicker'` elements initially
$(function() {
  $('input').filter('.datepicker').datepicker(GLOBAL_INIT);
});

Comments