minDate/maxDate (range finder) input fields with different date format

minDate/maxDate (range finder) input fields with different date format

medarobmedarob Posts: 20Questions: 5Answers: 0

For my use case I used this example: https://datatables.net/extensions/datetime/examples/integration/datatables.html

I have a table with a column that has the following date format: "DD.MM.YYYY"

I added the data-search attribute with the correct ISO form date: YYYY-MM-DD so that filtering works. Otherwise it wouldn't work.
For example: <td data-search="2010-10-14">14.10.2010</td>

Using the max/min input fields works too BUT the date in the max/input field has the wrong date form: YYYY-MM-DD
I would like to have the DD.MM.YYYY format in the date input field as well.

If I change the minDate/maxDate format to 'DD.MM.YYYY', filtering doesn't work anymore.
minDate = new DateTime('#min', {
format: 'DD.MM.YYYY'
});
maxDate = new DateTime('#max', {
format: 'DD.MM.YYYY'
});

here is a live example from my use-case: https://live.datatables.net/fawasaza/1

Is it possible to use the date form "DD.MM.YYYY" in the maxDate/minDate input fields as well?
Do I need to add the data-search attribute to the <td>?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 22,162Questions: 26Answers: 5,102
    edited July 17 Answer ✓

    Use moment.js to format the input dates in the search plugin, for example:

    let date = moment(data[4], "DD.MM.YYYY");
    

    I updated your test case to include moment.js and changed a couple of the dates to 18.07.2025 and 20.07.2025 for easy testing. I removed the data-search attributes from all the rows.

    https://live.datatables.net/fawasaza/2/edit

    Kevin

  • medarobmedarob Posts: 20Questions: 5Answers: 0

    Thank you. It worked :smile:

    Maybe this can be added to the basic example @kthorngren ?

  • allanallan Posts: 64,756Questions: 1Answers: 10,716 Site admin

    I'll take a look and see where it would be best to include such an example.

    Allan

Sign In or Register to comment.