Search with range date not fonctionnal

ebouilleur

Hi,

I use the range date like https://datatables.net/extensions/datetime/examples/integration/datatables.html with moment.
But the min date is not include in my datatable.
In found why, but not how solve it.

It's because gmt with moment.

When I pick a date for the input min, like 2024-09-01 and show it in the console i see : "Sun Sep 01 2024 02:00:00 GMT+0200 (heure d’été d’Europe centrale)"
And the data in my table is 2024-09-01, so it's not include.

Have you any idea how solve that ?

Regards
Yves

rf1234

Had some difficulties understanding what you require, but I'll try my best

You are trying to get this working, right?

// Custom filtering function which will search data in column four between two values
DataTable.ext.search.push(function (settings, data, dataIndex) {
    var min = minDate.val();
    var max = maxDate.val();
    var date = new Date(data[4]);
 
    if (
        (min === null && max === null) ||
        (min === null && date <= max) ||
        (min <= date && max === null) ||
        (min <= date && date <= max)
    ) {
        return true;
    }
    return false;
});

You have multiple types of date formats usually:
- the user data entry format
- the format returned from your server
- the format you need to make comparisons, e.g. YYYY-MM-DD

All you need is to make sure you can convert the data entry format and the format returned from your sever into YYYY-MM-DD or YYYYMMDD and compare it.

Since I do not know what your user data entry format and the format returned from you server is, I cannot give you any more specific advice.

rf1234

Using https://www.deepl.com/ I first translated your question into French and then into American English. The result is actually easier to understand

Amazing what AI can do for you

So this is the French:

Bonjour,
J'utilise l'intervalle de dates comme https://datatables.net/extensions/datetime/examples/integration/datatables.html avec moment.
Mais la date min n'est pas incluse dans ma table de données.
J'ai trouvé pourquoi, mais pas comment résoudre le problème.
C'est à cause de gmt avec moment.
Lorsque je choisis une date pour l'entrée min, comme 2024-09-01 et que je l'affiche dans la console, je vois : « Sun Sep 01 2024 02:00:00 GMT+0200 (heure d'été d'Europe centrale) »
Et les données dans mon tableau sont 2024-09-01, donc ce n'est pas inclus.
Avez-vous une idée pour résoudre ce problème ?
Merci beaucoup.
Yves

... and the American English:

Hello,
I use the date interval as https://datatables.net/extensions/datetime/examples/integration/datatables.html with moment.
But the min date is not included in my data table.
I found out why, but not how to solve the problem.
It's because of gmt with moment.
When I choose a date for the min entry, like 2024-09-01 and display it in the console, I see: “Sun Sep 01 2024 02:00:00 GMT+0200 (Central European Summer Time)”
And the data in my table is 2024-09-01, so it's not included.
Do you have any idea how to solve this problem?
Thank you very much.
Yves

rf1234

Since I am German I first translated the post into German because I didn't quite understand it. The translation made it worse: I had difficulty understanding anything.

The algorithm couldn't really find the right German expressions for the "French-English" . After translating everything into French and then again into German: Everything was fine .

In 2 years I should be able to speak French with a French person in real time without knowing a single word of French. Let's see if that works out.

rf1234

What I really like is: The AI is capable of dealing with "Frenglish" and - probably even worse - "Denglish". But: Translating "Frenglish" into German, or "Denglish" into French, is a different ball game .

rf1234

@ebouilleur
Ne vous inquiétez pas, ce forum a presque toujours une solution. Dans ce cas aussi, nous trouverons quelque chose ...

ebouilleur

Hello

You can see the trouble here : http://app.test.factureo.com/liste--prestations-detail.html

For "Date de facture", search "Date minimum" 1 august 2024. And after look in the table, for the colum "date factures" they are not data...
Make another search with min date at 31 july and you will see some data at the 1 august 2024

   let minDate2, maxDate2;
    // Custom filtering function which will search data in column four between two values
    DataTable.ext.search.push(function (settings, data, dataIndex) {
        let min = minDate2.val();
        let max = maxDate2.val();
        let date = new Date(data[7]);
        // let now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(),
        //     date.getUTCDate(), date.getUTCHours(),
        //     date.getUTCMinutes(), date.getUTCSeconds());
        // date = new Date(now_utc);
        console.log("date" + min);
        console.log("date" + date);
        if (
            (min === null && max === null) ||
            (min === null && date <= max) ||
            (min <= date && max === null) ||
            (min <= date && date <= max)
        ) {
            return true;
        }
        return false;
    });
    // Create date inputs
    minDate2 = new DateTime('#min_facture', {
        format: 'YYYY-MM-DD'
    });
    // minDate2 = Date.UTC(minDate2.getUTCFullYear(), minDate2.getUTCMonth(),
    //     minDate2.getUTCDate(), minDate2.getUTCHours(),
    //     minDate2.getUTCMinutes(), minDate2.getUTCSeconds());
    maxDate2 = new DateTime('#max_facture', {
        format: 'YYYY-MM-DD'
    });

Regards

rf1234

I got this from my browser's console. Since my browser language is German, the dates are in German. You cannot make comparisons with stuff like "Fri Sep 06 2024 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)"

You need to transform your dates into YYY-MM-DD or YYYYMMDD to be able to make those comparisons. Since you are already using moment.js, I would recommend to check the moment.js documentation to figure out how to do this.

This should give you today's date in the right format, for example

var date = moment().format('YYYYMMDD');

The creation of your date inputs doesn't seem to work either. They also return the long date string above. The YYYYMMDD conversion isn't happening. I would use your browser's debugger to look into that.

ebouilleur

I have try to initialise my datatable with :

$.fn.dataTable.moment('YYYY-MM-DD');

and also initialise minDate2 like :

let minDate2 = moment().format('YYYY-MM-DD');

But it's not look like change anything

rf1234

You used the code from the example - which works in the example. Maybe you want to use the download builder to make sure you have all the files required to make it work?!

https://datatables.net/download/

ebouilleur

Ok, it's solved !

I have add the moment.format like :

let min = minDate2.val(); if (min !== null) {min = moment(min).format('YYYY-MM-DD')}; let max = maxDate2.val(); if (max !== null) {max = moment(max).format('YYYY-MM-DD')}; // let date = new Date(data[7]); let date = moment(data[7]).format('YYYY-MM-DD');

Thank

rf1234

Great you got it working!

Good alternative doing it with moment.js - if you have it installed anyway.