Date format support for datatable columns

This commit is contained in:
Denys Vuika
2016-07-04 17:56:52 +01:00
parent 7d6b1c922b
commit b02a465f27
3 changed files with 27 additions and 7 deletions

View File

@@ -41,15 +41,19 @@
</td> </td>
<td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type" <td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}" class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
(click)="onRowClick(row, $event)" (dblclick)="onRowDblClick(row, $event)"> (click)="onRowClick(row, $event)"
<div *ngSwitchCase="'image'"> (dblclick)="onRowDblClick(row, $event)">
<div *ngSwitchCase="'image'" class="cell-value">
<i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i> <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
<img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}"> <img *ngIf="!isIconValue(row, col)" class="image-cell" alt="" src="{{data.getValue(row, col)}}">
</div> </div>
<div *ngSwitchCase="'text'"> <div *ngSwitchCase="'date'" class="cell-value">
{{data.getValue(row, col)}} {{data.getValue(row, col)}}
</div> </div>
<span *ngSwitchDefault> <div *ngSwitchCase="'text'" class="cell-value">
{{data.getValue(row, col)}}
</div>
<span *ngSwitchDefault class="cell-value">
<!-- empty cell for unknown column type --> <!-- empty cell for unknown column type -->
</span> </span>

View File

@@ -39,7 +39,8 @@ export interface DataRow {
export interface DataColumn { export interface DataColumn {
key: string; key: string;
type: string; // text|image type: string; // text|image|date
format?: string;
sortable?: boolean; sortable?: boolean;
title?: string; title?: string;
srTitle?: string; srTitle?: string;

View File

@@ -15,6 +15,8 @@
* limitations under the License. * limitations under the License.
*/ */
import { DatePipe } from '@angular/common';
import { import {
DataTableAdapter, DataTableAdapter,
DataRow, DataRow,
@@ -78,7 +80,20 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
if (!col) { if (!col) {
throw new Error('Column not found'); throw new Error('Column not found');
} }
return row.getValue(col.key);
let value = row.getValue(col.key);
if (col.type === 'date') {
let datePipe = new DatePipe();
let format = col.format || 'medium';
try {
return datePipe.transform(value, format);
} catch (err) {
console.error(`DocumentList: error parsing date ${value} to format ${format}`);
}
}
return value;
} }
getSorting(): DataSorting { getSorting(): DataSorting {