Datatable datefilter loads correctly but throws Uncaught TypeError on date selection - datatables

Question

This question is just a replication of scenario given Jquery Datatables Date Range Filter. The datatable loads correctly but throws following error when selecting a date. The following error is thrown:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
at Datepicker._selectDay (jquery-ui.1.12.1.js:8188)
at HTMLTableCellElement.selectDay (jquery-ui.1.12.1.js:8789)
at HTMLTableCellElement.dispatch (jquery.v1.12.0.min.js:3)
at HTMLTableCellElement.r.handle (jquery.v1.12.0.min.js:3)
Examining
This issue is well known. For example if datepicker element id is "#datepickerStart", it should be loaded only once in given page. If two DOM element has this same element id, above error will be thrown.
We used it mainly for individual field search as given in Jquery Datatables Date Range Filter. When I inspected developer tools in browser, I could see two DOM having "#datepickerStart" generated. One in search area which is correct and the other just at the end of table area.
I am confused how these duplicate table columns are generated by following code. Please know that this happens when either injecting below code or putting raw HTML for search text boxes:
$('#example tfoot th').each(function (){
var title = $(this).text();
if (title === "Start date") {
$(this).html( '<input type="text" id="datepickerStart" placeholder="Search '+title+'" />' );
} else if (title === "End date") {
$(this).html( '<input type="text" id="datepickerEnd" placeholder="Search '+title+'" />' );
} else {
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
}
});
Do I miss something or I do it the wrong way? I cross-checked that I didn't initialize datatable twice or created datePicker element twice.
Could you please help sort out where it goes wrong? Thanks in advance.
Edit 1:
The table structure is created as follows,
<table id='example' class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>URL</th>
<th>Title</th>
<th>User</th>
<th>Start date</th>
<th>End date</th>
<th>Duration</th>
</tr>
</thead>
<tfoot>
<tr>
<th>URL</th>
<th>Title</th>
<th>User</th>
<th>Start date</th>
<th>End date</th>
<th>Duration</th>
</tr>
</tfoot>
</table>

Answer 1

Here is something for you to play with, see it here: http://jsbin.com/haxaror/edit?html,js,output
$(document).ready(function () {
// my dates did not fit yours so this simple loop fixes that
for (var i = 0; i < dataSet.length; ++i) {
dataSet[i].start_date = startdates[i];
dataSet[i].end_date = enddates[i];
}
// Column defs (just the way i do it)
var col = [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date", type: "date" },
{ data: "end_date", type: "date" },
{ data: "salary" }
];
var thistable = $('#example').DataTable({
data: dataSet,
select: { style: 'single' },
columns: col,
dom: 'frtip',
})
// Apply the search including date columns. Datepicker will not allow invalid dates
thistable.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
$("#datepickerStart").datepicker(
{
dateFormat: "yy-mm-dd", changeYear: true,
onSelect: function (dateText, inst) {
thistable.column(4)
.search(dateText)
.draw();
}
});
$("#datepickerEnd").datepicker(
{
dateFormat: "yy-mm-dd", changeYear: true,
onSelect: function (dateText, inst) {
thistable.column(5)
.search(d)
.draw();
}
});
});

Answer 2

Your raw html is static form what I see so why not put your search box straight in to the code:
<table id='example' class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>URL</th>
<th>Title</th>
<th>User</th>
<th>Start date</th>
<th>End date</th>
<th>Duration</th>
</tr>
</thead>
<tfoot>
<tr>
<th><input type="text" placeholder="Search URL"/></th>
<th><input type="text" placeholder="Search Title"/></th>
<th><input type="text" placeholder="Search User"/></th>
<th><input type="text" id="datepickerStart" placeholder="Search Start Date"/></th>
<th><input type="text" id="datepickerEnd" placeholder="Search End Date"/></th>
<th><input type="text" placeholder="Search Duration"/></th>
</tr>
</tfoot>
</table>
But having said all this, I think you are looking in the wrong area for your error. show use your data structure and the .DataTable() I suspect that there is something wrong with the columns definition not matching the json exactly.

Answer 3

This issue doesn't have proper resolution, but a related answer can be found in this post Datepicker returning uncaught typeError: undefined 'currentDay'
Please continue all your suggestions and answers in Datepicker returning uncaught typeError: undefined 'currentDay' I am closing this post since no consistent behavior is found even in linked page yet.