How to add date range filter?

Moiz

Hi,
Recently, I have made two custom input field of type "date" and want to implement date range filter on the same column named as "joining" but couldn't figure it out how may I achieve it. I have already seen examples regarding range filter based on age and date. Plus, I have also searched on this forum but none of them works for me. Testcase -> http://live.datatables.net/yigurono/1/edit.

Your help would be highly appreciated.

Moiz

Incase previous test case wouldn't open -> http://live.datatables.net/rofuqomo/2/edit

kthorngren

Maybe I'm missing it but I don't see any code for the date range filter. If you want to create your own maybe this example will help:
https://datatables.net/forums/discussion/comment/158162/#Comment_158162

It is a search plugin and it uses moment.js.

Another option is to use the YADCF plugin if you don't want to write your own.

If you would like help please provide a test case with what you are trying so we can help debug.

Kevin

Moiz

Hi, brother @kthorngren!

Really sorry from my side, in order to make things simple, I have missed the javascript part. First of all, I don't need button functionality while filtering dates. Secondly, I am trying to use moment.js as you suggested to me above but the problem is that nothing happens. Maybe I have missed some crucial stuff. Please take a look-> http://live.datatables.net/rofuqomo/3/edit

kthorngren

There are two problems. The first is you need to set the date columns to columns.type or date. Using console.log statements you can see the the moment date format for the columns cDate is not valid:

Moment {_isAMomentObject: true, _i: "28/01/2000", _isUTC: false, _pf: {…}, _locale: Locale, …}
_d: Invalid Date {}
_i: "28/01/2000"
_isAMomentObject: true
_isUTC: false
_isValid: false
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, …}
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
__proto__: Object

You can see it here:
http://live.datatables.net/zozaraza/1/edit

You need to add the date format to this line:
var cDate = moment(data[i]);

You can find the moment date/time formats here. The line should look like this:
var cDate = moment(data[i], 'DD/MM/YYYY');

Kevin

Moiz

@kthorngren
First of all. Thank you very much for the response and great explanation brother Kevin. In this test case -> http://live.datatables.net/kilayuce/1/edit date range filter is working fine but here, it is checking both the joining and the leaving columns while filtering. I just want to apply range filter on a single column named "joining" especially in this discussion. Because in my project I have separate range date pickers for both joining and the leaving columns. Again thanks for helping me out.

kthorngren

The search plugin checks the column type: if (col.type == "date"). You can create two different column types and change this code in columnDefs to match:

         {
           targets: [7, 8],
           type: 'date'
         }

You can then add a second if to the plugin to check for the other column type and evaluate the values in the other inputs.

Kevin

Moiz

@kthorngren
Hmm! Got your point brother. Now, the date range filter is working fine for both the joining and the leaving column in my project. During our discussion, I have realized that my select all checkbox is checked when no results are found.

I have given these conditions in my draw callback function which is working fine even when switching to the next page.

if (selected === all) {
 $('#tableId thead tr').addClass('checked');
}
else {
 $('#tableId thead tr').removeClass('checked');
}

I don't know why it keeps showing select all checkbox as checked when no results are found. I don't even select a single row. Please help! Testcase -> http://live.datatables.net/kilayuce/3/edit

kthorngren

You can use console.log statements to debug the values for selected and all. You have this code:

    var selected = this.api().rows({page: 'current', selected: true}).count();
    var all = this.api().rows({page: 'current'}).count();

When no results are found then the result of both statements will be 0 since there are no rows on the current page. I'm not sure what you are wanting but maybe you need to change the if statement to something like this: if (selected > 0 && selected === all) {

Kevin

Moiz

@kthorngren
Thanks, brother Kevin!
Now, it is working fine.
http://live.datatables.net/kilayuce/5/edit