Tell me please how to add date picker for filtering by date.

vanvenvon

This is my code for print and excel function.
and how to write code to add datepicker for filtering data by date?

$(document).ready(function() {
    $('#dataTable2').DataTable( {
    'destroy': true,
    'paging': true,
    'lengthChange': true,
    'searching': true,
    'ordering': true,
    'info': true,
    'autoWidth': true,
    'responsive':true,
        dom: "<'row'<'col-sm-2'l><'col-sm-6'B><'col-sm-4'f>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            { extend: 'excel', className: 'btn btn-primary btn-xs mb-3' },
            { extend: 'print', className: 'btn btn-primary btn-xs mb-3' }
        ]
    } );
    table.draw();
} );

fiks

Try this link (http://www.daterangepicker.com/). It worked fine for me.

vanvenvon

@fiks thanks for the answer but i mean that site just tell draw the form, i need the fuction too for filter data by date.

colin

Hi @vanvenvon ,

This plugin here does date ranges. Also, there are quite a few forum threads such as this and external resources like this.

Hopefully that'll do the trick,

Cheers,

Colin

vanvenvon

Thank you @colin
I can handle this problem, but i can get data if i modify date format.

i write this code to show date form database.

<td><?php echo Date("d/m/Y",strtotime($var['tgl_peroleh'])); ?></td>

and this code for filter date

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = new Date( $('#min').val());
        var max = new Date( $('#max').val());
        var start = new Date( data[2] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && start <= max ) ||
             ( min <= start && isNaN( max ) ) ||
             ( min <= start && start <= max ) )
        {
            return true;
        }
        return false;
        }
    );
    $(document).ready(function() {
    var table = $('#dataTable2').DataTable();
    $('#dataTable2').DataTable( {
    'destroy': true,
    'paging': true,
    'lengthChange': true,
    'searching': true,
    'ordering': true,
    'info': true,
    'autoWidth': true,
    'responsive':true,
    'buttons':true,
        dom: "<'row'<'col-sm-2'l><'col-sm-6'B><'col-sm-4'f>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            { extend: 'excel', className: 'btn btn-primary btn-xs mb-3' },
            { extend: 'print', className: 'btn btn-primary btn-xs mb-3' }
        ],
            language: {
            searchPlaceholder: "Cari",
            search: "Search :",
          }
        } );
        // Event listener to the two range filtering inputs to redraw on input
        $('#min, #max').keyup( function() {
        table.draw();
        } );
    } );

vanvenvon

The simple question is, why i can't filter the data if the date format was modify

colin

Hi @vanvenvon ,

You can change the date format like this example here. If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

vanvenvon

Hallo @colin
I was write my code on JS Finddle and this my code.
Please tell me to make the date filter can get my data with my date format like this "01/05/2019".

vanvenvon

Hi @colin
Sorry my code in link comment above is wrong, the right code is this
That just can filter date format like "2019-05-01" and can't filter with the format date like this "01/05/2019". and form filter must click enter after input the date for get the result.

colin

Hi @vanvenvon ,

The problem with that fiddle is that you've got two date formats being displayed - you really need to ensure the data is sanitised and in a consistent format for each column. As it stands, it wont be possible to do much with it unless you make them consistent with orthogonal data .

Cheers,

Colin

vanvenvon

Hi @colin
Thank you for the answer, i will try it, hopfully can fix my problem.