DataTables date range filter not working

FRS4002

http://live.datatables.net/dujawuno/1/edit
I am trying to implement DataTables date range filter on a table, but it is not working. I am literally doing the exact same code that is available here: https://datatables.net/extensions/datetime/examples/integration/datatables.html
But still it is not working at all. Here is the test case: http://live.datatables.net/dujawuno/1/edit

kthorngren

There are a few problems.

1. You have "searching": false which turns off searching for the table. To leave searching on but remove the default search input use the dom option.
2. The dates are in column 0 not 6. Change data[6] to data[0].
3. The Javascript new Date() method doesn't understand your date format. Use moment.js to parse the datetime string.

I made all the changes here:
http://live.datatables.net/dujawuno/1/edit

Kevin

FRS4002

@kthorngren Thanks! My bad for the column number. Also, there is nothing changed in your link except css... Could you please update the link? Thanks again!

kthorngren

Sorry, here is the example:
http://live.datatables.net/dujawuno/5/edit

Kevin

FRS4002

@kthorngren Thanks, but it is not working as intended. For example, if you choose in the first input june 16 2022 and in the second input also june 16 2022, it says no matches found... Could you please make some further tests on it? Thanks, again!

kthorngren

It seems there are a few things that need to be done to compare the DateTime dates with moment dates. See if this example from this thread will work for you. You may need to parse your dates to remove the time, when passing into moment, for the comparison to work.

Kevin

FRS4002

@kthorngren http://live.datatables.net/cowakujo/1/edit
That worked a little bit when I added h:mm A, but I don't need to compare time also... I need only to compare date. I don't want to move time to another column... Is there any solution to this?

colin

Instead of adding in the time into the formatting, strip out the time from the data as Kevin suggested - something like this:

        var date = moment( data[4].split(' ')[0], 'DD/MM/YYYY', true ).unix();

Colin

rf1234

I don't need to compare time also... I need only to compare date

http://live.datatables.net/xajivaku/1/edit

That's how I am doing it usually. Please note that you need to tell moment that the input date format is DD/MM/YYYY again when making the date strings. If you don't it will disambiguate the input date the American way: MM/DD/YYYY.

FRS4002

@colin @rf1234 @kthorngren Colin's solution was definitely the best! Thank you all for the help. Now I need to add 2 mandatory things to my code:
1. I need the two date inputs in the same row of 'show 10 entries', which what I did here http://live.datatables.net/yusavida/1/edit
but unfortunately the code stopped working.
2. I need when I open the page, I need to automatically always show the rows that has today's date
How can I do these two things? Thanks again!

rf1234

http://live.datatables.net/kedovoye/1/edit

rf1234

This one is simpler using moment.js to get the current date.
http://live.datatables.net/focoyolo/1/edit

allan

Kevin started a discussion on this topic, for which I've included a change which should make this easier.

Allan

FRS4002

@rf1234 Oh my god! That 'http://live.datatables.net/kedovoye/1/edit' definitely worked! But regarding showing today's date rows as default not working here 'http://live.datatables.net/focoyolo/1/edit' I don't know if you understand what I need. Let us say for example, today's date is 21/06/2022, I want when I open the page only display rows that has this date only as default, if there is no rows with this date it will simply say 'No matching records found' as normal... and of course if I need to filter between dates it will work too as in here 'http://live.datatables.net/kedovoye/1/edit', but if date inputs are empty again only shows today's date rows which 21/06/2022

rf1234

http://live.datatables.net/focoyolo/2/edit

You could have coded all of this yourself with a little more knowledge of Boolean algebra.
There is no need to be good at math to code. Unfortunately many people are deterred from coding by math which is unnecessary. I was too, I actually hate math. The only math you need to know is Boolean algebra (unless you want to be able to code more than regular business applications including 99% of commercial banking apps by the way.)

This Wikipedia entry is too complex already ... https://en.wikipedia.org/wiki/Boolean_algebra
The essence is simpler. You'll find more on the subject by googling ... Good luck!

FRS4002

@rf1234 Thanks. The today's date row is showing correct, but there is an issue regarding date range picker. Try to choose in both inputs as 01/04/2022 it will show rows that has 01/04/2022 and 21/06/2022. That means it is showing both today's date and the date chosen, which is wrong... It should only show today's date if there is no dates chosen... If there are dates chosen show only dates chosen and hide/remove today's date...

kthorngren

You should be able to add logic to the search plugin that says if min or max have values then skip the current date if statement.

Kevin