jQuery datepicker error: Missing instance data for this datepicker
I am dynamically creating a textbox then adding a datepicker. The datepicker loads onclick, but when I change the month or change the month, I get the error message, "Missing instance data for this datepicker." How do I fix this bug. Here is the excerpt of jquery code
$(document).ready(function
() {
$('.filter').click(functio
n () {
var pos = $(this).position();
var width = $(this).outerWidth();
var height = $(this).outerHeight();
var dateDIV = $('<div id="dateDIV"></div>');
var startDateDIV = $("<div id='startDate'></div>");
var endDateDIV = $("<div id='endDate'></div>");
var startDateTXT = $('<input type="text" id="startDateTXTs" class="date">');
var endDateTXT = $('<input type="text" id="endDateTXTs" class="date">');
startDateTXT.datepicker({
});
endDateTXT.datepicker({
});
startDateDIV.append(startD
ateTXT);
endDateDIV.append(endDateT
XT);
dateDIV.append(startDateDI
V);
dateDIV.append(endDateDIV)
;
$('body').append(dateDIV);
var left = 0;
if (pos.left + width - 200 - 10 < 0)
left = 0;
else
left = pos.left + width - 200 - 10;
filterdiv.css({
position: "absolute",
textAlign: "left",
backgroundColor: "white",
border: "1px solid black",
color: "black",
height: "288px",
width: "209px",
top: pos.top + height + 1 + "px",
left: left + "px"
}).show();
},
error: function (xhr, status, error) {
alert(error);
}
});
});
$(document).mouseup(functi
on (e) {
var container = $("#divFilterList");
if (container.has(e.target).l
ength === 0) {
container.detach();
}
});