How to change Custom Search Date format to match my date format

How to change Custom Search Date format to match my date format

confusedUser1confusedUser1 Posts: 5Questions: 3Answers: 0

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']]
    });

});

Sign In or Register to comment.