I am facing issue in sorting/Filtering date column in PrimeNg Datatable.As i am displaying date "dd/mm/yyyy" string .
I solved this issue using moment.js, because it's easier and faster, but always code can be customized a little bit if You want to do it without any frameworks (i hope few more if conditions, and string conversions)
So You have to add moment.js to Your project: a) by adding src link to your main html index file (where is main angular selector, polyfills etc.) from this site https://cdnjs.com/libraries/moment.js/ b) but if it's production i recommend to add it via npm. http://momentjs.com/docs/ here are other possibilities.
Then you must declare moment variable under import statements and above @Component annotation
declare var moment;
then if u already have primeng module added to Your project, in the html file within primeng's p-dataTable tag there is p-column tag and here within this tag we need to add sortable="custom" and (sortFunction)="mysort($event)" like so:
<p-column field="date" header="Data" sortable="custom" (sortFunction)="mysort($event)"></p-column>
Date displayed with p-column tag is in DD.MM.YYYY string format like e.g: 03.01.2017
After that in component where we are fetching and pushing data to array, which is used to display data in a table, in my example named appointments we need to add function named mysort (because we are calling this function in html p-column tag)
mysort(event) {
let comparer = function (a, b): number {
let formatedA = moment(a.date, "DD.MM.YYYY").format('YYYY-MM-DD');
let formatedB = moment(b.date, "DD.MM.YYYY").format('YYYY-MM-DD');
let result: number = -1;
if (moment(formatedB).isBefore(formatedA, 'day')) result = 1;
return result * event.order;
};
this.appointments.sort(comparer);
}
in my example a.date and b.date is a string like "21.12.2016" that we need to format to YYYY-MM-DD. Then we just are comparing dates.
And just it, i checked this code and it works. I hope it will help someone, and excuse me if explanation was written in tutorial style but this is my first answer and i wanted to do it in the right way :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With