Trying to get this date range picker work in my datatable for the first time, but getting the above error. Could anyone help me figure out what i'm missing here.
Below added is the script I have in my View -
<script type="text/javascript" src="~/Content/metronic/assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js"></script>
<script type="text/javascript" src="~/Content/metronic/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="~/Content/metronic/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Content/metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="~/Content/Js/yadcfDatatableColumnFilter/jquery.dataTables.yadcf.js"></script>
<script>
completeWrDtbLoad();
/*** COMPLETE WR DTB ***/
function completeWrDtbLoad() {
var status = [2];
var dtbCol = [
//{
// 'data': null, 'render': function (data, type, full, meta) {
// return '<span class="row-details row-details-close"></span>';
// }
//},
{ 'data': 'smsPhone', 'name': 'smsPhone', 'type': 'string' },
{ 'data': 'smsName', 'name': 'smsName', 'type': 'string' },
{ 'data': 'smsContent', 'name': 'smsContent', 'type': 'string' },
{
'data': 'smsDate', 'name': 'smsDate', 'type': 'daterange', 'render': function (data, type, full, meta) {
var res = ToJavaScriptDate(data);
return res;
},
},
{ 'data': 'smsDescription', 'name': 'smsDescription', 'type': 'string' },
{ 'data': 'smsStatus', 'name': 'smsStatus', 'type': 'string' },
{
'data': null, 'name': '', 'render': function (data, type, full, meta) {
return ''
}
}
];
$('#tb-completeWr2').dataTable({
'serverSide': true,
'ajax': {
'type': 'POST',
'url': '@Url.Action("getSmsHistory", "SMS")',
'contentType': 'application/json; charset=utf-8',
'data': function (data) {
for (i = 0; i < dtbCol.length; i++) {
data.columns[i].type = dtbCol[i].type;
//data.orderType = orderType;
//data.orderStatus = orderStatus;
}
return data = JSON.stringify(data);
},
},
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
'pageLength': 50,
'processing': true,
'paging': true,
'columns': dtbCol,
'order': [3, 'desc']
}).yadcf([
{ column_number: 0, filter_type: 'text', style_class: "", filter_default_label: 'Search', filter_container_id: "column0" },
{
column_number: 3, filter_type: 'range_date', style_class: "", filter_container_id: "column3", date_format: 'dd/mm/yyyy', datepicker_type: 'bootstrap-datepicker',
filter_plugin_options: {
autoclose: true,
}
},
]);
}
</script>
You need to use this date picker plugin Bootstrap 3 Datepicker