DataTable date filter calendar

[pandora-otto]

I'm using a date filter on my DataTable like this:

<Column
    field="Modified"
    header="Modified"
    filterField="Modified"
    dataType="date"
    body={tplModifiedBody}
    sortable
    filter
    filterElement={tplModifiedFilter}></Column>

My tplModifiedFilter is like this:

const tplModifiedFilter = (options) => {
    return (
	    <Calendar
		    value={options.value}
		    onChange={(e) => options.filterCallback(e.value, options.index)}
		    dateFormat="dd/mm/yy"
		    placeholder="dd/mm/yy"
		    mask="99/99/9999"
	    />
    );
    };

When I select a date, for example 30/12/2024, it gives me the following:

If I add another rule and select another date, it gives me the following:

So my question is, why on the second date, the format is different? How can I achieve to have the same date time format on both dates?

Any advice is much appreciated.

Thanks

[melloware]

Hmmm they both should be Date objects the first one should never have been a String right? Is your JSON value filterField="Modified" a String or is it a Date object in the JSON? It needs to be a Date object.

[pandora-otto]

Thank you for the message.

It is a string like below,

but I do change them to Date object and then set my data.

res.rows.forEach((row) => {
	row.Created = new Date(row.Created);
	row.Modified = new Date(row.Modified);
});

setData(res.rows);

I would expect the Calendar component to handle this.
I will try to change the json response to return Date object next and report back.

Many thanks 🙏

[melloware]

i agree let me know when you find out?

[pandora-otto]

Right! False alarm.
It turns out I was using moment library and I messed up the first date.
All is good now. Thank you and apologies for not checking thoroughly my code.
🙏