Multi-select drop down to date picker

BalaKrishnanDhanuskodi

Happy Morning one and all,

Following is the code that is used to create multi-select filter under each column, how can I bring a datepicker in one of the date columns. Please refer Exhibit.

select: true,
lengthChange: false,
initComplete: function () {
    this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
 
                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            } );
 
                column.data().unique().sort().each( function ( d, j ) {
 
                if(column.search() === '^'+d+'$'){
                     
                select.append( '<option value="'+d+'" selected="selected">'+d+'</option>' )
                } else {
                select.append( '<option value="'+d+'">'+d+'</option>' )
                }
                } );
 
    } );
},

Exhibit

allan

Currently your code is creating a select element on line 6. You'd need to modify that code to create the date picker input for the column you need it on instead.

Alternatively, if you don't want to code that up, use the excellent thirdparty YADCF plug-in.

Allan