How to change Custom Search Date format to match my date format
How to change Custom Search Date format to match my date format
I am working on a table that I want to include searching based on dates. I have followed https://datatables.net/extensions/searchbuilder/examples/customisation/customConditions.html and have everything working except the date format in the example above is "YYYY-MM-DD" and my table has dates as "MM-DD-YYYY". Where is the example do I change the format? Or do I need to change my JavaScript? If I change the date in the Value field of the custom search to match my data's date format, the correct rows are filtered.
JavaScript:
$(document).ready(function () {
var cols = [
{ data: "transactionYear", title: "Tx Yr" },
{ data: "transactionDate", title: "Tx Date" },
{ data: "make", title: "Make" },
{ data: "model", title: "Model" },
{ data: "sizeCategory", title: "AC Class" },
{ data: "serNbr", title: "Serial #" },
{ data: "regNbr", title: "Tail #" },
{ data: "mfgYear", title: "Mfg Yr" },
{ data: "dlvYear", title: "Dlv Yr" },
{ data: "purchaseDate", title: "Purchase Dt" },
{ data: "seller", title: "Seller" },
{ data: "purchaser", title: "Purchaser" },
{ data: "broker", title: "Broker" },
{ data: "ICAO", title: "ICAO" },
{ data: "airportName", title: "Airport" },
{ data: "cityName", title: "City" },
{ data: "regionName", title: "Region" },
{ data: "countryName", title: "Country" }
];
var table = $('#territorytransactions').DataTable({
"scrollX": true,
fixedColumns: {
left: 3
},
"pageLength": 20,
"columns": cols,
columnDefs: [{ type: 'date', targets: 1 }, { type: 'date', targets: 9 }],
//dom: 'QBfrtip',
dom: '<"top"Q>rt<"bottom"B>ip',
language: {
searchBuilder: {
add: 'Add Search Conditions',
title: {
0: 'Custom Search Builder:',
_: 'Active Filter Rules (%d):',
},
conditions: {
num: {
// Overwrite the equals condition for the num type
'+-5': {
// This function decides whether to include the criteria in the search
isInputValid: function (el, that) {
let allFilled = true;
// Check each element to make sure that the inputs are valid
for (let element of el) {
if ($(element).is('input') && $(element).val().length === 0) {
allFilled = false;
}
}
return allFilled;
},
// This is the string displayed in the condition select
conditionName: '+- 5',
// This function gathers/sets the values from the dom elements created in the init function that are to be used for searching
inputValue: function (el) {
let values = [];
// Go through the input elements and push each value to the return array
for (let element of el) {
if ($(element).is('input')) {
values.push($(element).val());
}
}
return values;
},
// This function initialises the criteria, specifically any dom elements that are required for its use
init: function (that, fn, preDefined = null) {
// Declare the input element
let el = $('<input/>')
.addClass(that.classes.value)
.addClass(that.classes.input)
.on('input', function () {
fn(that, this);
});
// If there is a preDefined value then add it
if (preDefined !== null) {
$(el).val(preDefined[0]);
}
return el;
},
// Straightforward search function comparing value from table and comparison from the input element
// These values are retrieved in `inputValue`
search: function (value, comparison) {
return (
+value <= +comparison[0] + 5 && +value >= +comparison[0] - 5
);
}
}
}
}
},
},
buttons: [{
extend: 'excelHtml5',
text: 'Export to Excel',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]', sheet).attr('s', '2');
}
}],
order: [[1,'desc'], [2, 'asc'], [3, 'asc'], [5, 'asc'], [1, 'asc']]
});
});