When using mat-sort for dd-MM-yyyy format. I am facing an issue like the order is mismatching and I think this is sorting based on date(dd), as I mentioned in the below image
this is my code,
Html:
<table matSort (matSortChange)="sortData($event)">
<thead style="background-color: #f6f9fc;">
<tr>
<th mat-sort-header="fromDate" > FROM DATE </th>
<th mat-sort-header="toDate" > TO DATE </th>
<th mat-sort-header="subTotal" >SUBTOTAL</th>
<th mat-sort-header="cashAdvance" >ADVANCE</th>
<th mat-sort-header="finalbalance" >BALANCE ADVANCE</th>
<th mat-sort-header="totalReimbursement" >TOTAL REIMBURSEMENT</th>
<th >VIEW APPROVERS</th>
<th >APPROVAL STATUS</th>
<!-- <th >STATUS</th>-->
<th >ACTION</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let expenseReimbursement of expenseReimbursementListFiltered | searchFilter: query | paginate: { itemsPerPage: mySelect, currentPage: p } ">
<td >{{expenseReimbursement.fromDate}}</td>
<td >{{expenseReimbursement.toDate}}</td>
<td >{{expenseReimbursement.subTotal}}</td>
<td >{{expenseReimbursement.cashAdvance}}</td>
<td *ngIf="expenseReimbursement.totalReimbursement == 0" >{{expenseReimbursement.finalbalance}}</td>
<td *ngIf="expenseReimbursement.totalReimbursement > 0" >0.00</td>
<td >{{expenseReimbursement.totalReimbursement}}</td>
<td >
<mat-icon *ngIf="expenseReimbursement.approval != undefined"
(click)="viewapproverstatus(expenseReimbursement)">visibility</mat-icon>
<span *ngIf="expenseReimbursement.approval == undefined"> -- </span>
</td>
<!-- <td >{{expenseReimbursement.approver.employeeName}}</td> -->
<!-- <td *ngIf="expenseReimbursement.approval == undefined">Saved as Draft</td> -->
<td >
<div *ngIf="expenseReimbursement.approval != undefined">
<span *ngIf="expenseReimbursement.approval.approvalStatus.listTypeValueName == 'Approved'">
{{expenseReimbursement.approval.approvalStatus.listTypeValueName}}
</span>
<span *ngIf="expenseReimbursement.approval.approvalStatus.listTypeValueName == 'Pending'">
{{expenseReimbursement.approval.approvalStatus.listTypeValueName}}
</span>
<span *ngIf="expenseReimbursement.approval.approvalStatus.listTypeValueName == 'Denied'">
{{expenseReimbursement.approval.approvalStatus.listTypeValueName}}
</span>
</div>
<div *ngIf="expenseReimbursement.approval == undefined">Saved as Draft</div>
</td>
<!-- <td *ngIf="expenseReimbursement.status.listTypeValueName =='Active'" >
<ul id="nav">
<li style=" border: 1px solid green;">
<a *ngIf="expenseReimbursement.status.listTypeValueName =='Active'">{{expenseReimbursement.status.listTypeValueName}}</a>
<span>
<mat-icon aria-hidden="false" aria-label="Example arrow_drop_down">arrow_drop_down</mat-icon>
</span>
<ul (click)="statuschangeactive(expenseReimbursement.status)">
<li >
<a >In-Active</a>
<mat-icon aria-hidden="false">do_disturb</mat-icon>
</li>
</ul>
</li>
</ul>
</td>
<td *ngIf="expenseReimbursement.status.listTypeValueName =='In-Active'" >
<ul id="nav">
<li style=" border: 1px solid red;">
<a *ngIf="expenseReimbursement.status.listTypeValueName =='In-Active'">{{expenseReimbursement.status.listTypeValueName}}</a>
<span>
<mat-icon aria-hidden="false" aria-label="Example arrow_drop_down">arrow_drop_down</mat-icon>
</span>
<ul (click)="statuschangeinactive(expenseReimbursement.status)">
<li >
<a >Active</a>
<mat-icon aria-hidden="false">verified</mat-icon>
</li>
</ul>
</li>
</ul>
</td>-->
<td >
<button
mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon >more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="openDialog(expenseReimbursement.expenseReimbursementId)">
<mat-icon >visibility</mat-icon>
<span mat-button >View</span>
</button>
<!-- <button *ngIf="expenseReimbursement.approval != undefined" mat-menu-item>
<div *ngIf="expenseReimbursement.draft == true"
(click)="updateexpensereburisment(expenseReimbursement.expenseReimbursementId)">
<mat-icon >edit</mat-icon>
<span >Edit</span>
</div>
</button> -->
<button [disabled]="expenseReimbursement.approval" mat-menu-item>
<div (click)="updateexpensereburisment(expenseReimbursement.expenseReimbursementId)">
<mat-icon >edit</mat-icon>
<span >Edit</span>
</div>
</button>
</mat-menu>
</td>
</tr>
</tbody>
</table>
Ts:
Note: I used here compare method.
sortData(sort: Sort) {
const data = this.expenseReimbursementListFiltered.slice();
if (!sort.active || sort.direction === '') {
this.expenseReimbursementListFiltered = data;
return;
}
this.expenseReimbursementListFiltered = data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'fromDate':
return this.compare(a.fromDate, b.fromDate, isAsc);
case 'toDate':
return this.compare(a.toDate, b.toDate, isAsc);
case 'subTotal':
return this.compare(a.subTotal, b.subTotal, isAsc);
case 'cashAdvance':
return this.compare(a.cashAdvance, b.cashAdvance, isAsc);
case 'finalbalance':
return this.compare(a.finalbalance, b.finalbalance, isAsc);
case 'totalReimbursement':
return this.compare(a.totalReimbursement, b.totalReimbursement, isAsc);
default:
return 0;
}
});
}
compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
I want proper sorting for dates in the table in dd/MM/yyyy format.
CodePudding user response：
You just need to convert this date object with new date()
case 'fromDate':
return this.compare(new Date(a.fromDate), new Date(b.fromDate), isAsc);
case 'toDate':
return this.compare(new Date(a.toDate), new Date(b.toDate), isAsc);
Because , it considers the date value in string format. Hope this will work , because I have used this way
CodePudding user response：
The best solution is add a new property "formateddDate" to the elements of your array
expenseReimbursement .forEach((x:any)=>{
x.fromDateFormatted=x.fromDate.split('-').reverse().join();
x.ToDateFormatted=x.toDate.split('-').reverse().join();
})
And use this "properties" when sort, see that they are string in the way "yyyyMMdd"
NOTE: use new Date("dd-MM-yyyy") it's not correct, to create a new Date from string the string should be in "standard format" yyyy-MM-dd