Me gustaría formatear una columna de fecha como una fecha corta en Angular 2 NGX Datatable.
Aquí está el HTML:
<ngx-datatable [rows]="toDos" [columns]="columns"> </ngx-datatable>Aquí está el componente TypeScript
import { Component, OnInit } from '@angular/core'; import { IToDo } from '../shared/todo'; import { ToDoService } from '../shared/todo.service'; @Component({ selector: 'app-todo-list', templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.css'] }) export class TodoListComponent implements OnInit { toDos: IToDo[]; columns = [ { prop: 'toDoId' }, { name: 'To Do', prop: 'name' }, { prop: 'priority' }, { prop: 'dueDate' }, { prop: 'completed' } ]; constructor(private _toDoService: ToDoService) { } ngOnInit() { this.toDos = this._toDoService.getToDos(); } }He intentado esto en el HTML pero da un error de análisis de plantilla:
<ngx-datatable [rows]="toDos" [columns]="columns" <ngx-datatable-column prop="dueDate"> <ng-template let-value="value" ngx-datatable-cell-template> {{value | date[:shortDate]}} </ng-template> </ngx-datatable-column> > </ngx-datatable>constructor( private fb: FormBuilder, private _currencyPipe: CurrencyPipe, private _datePipe: DatePipe ) { this.rows = [ {from: Date().toString(), to: Date(), amount: 100, verified: false}, {from: Date(), to: Date(), amount: 100, verified: true}, ]; } ngOnInit() { this.columns = [ { name: 'FROM', prop: 'from', pipe: this.datePipe()}, { name: 'TO', prop: 'to', pipe: this.datePipe()}, { name: 'AMOUNT', prop: 'amount', width: 85, pipe: this._currencyPipe}, { name: 'CONFIRM | DELETE', cellTemplate: this.editCell, width: 155} ]; this.buildForm(); } datePipe () { return {transform: (value) => this._datePipe.transform(value, 'MM/dd/yyyy')}; } Siempre puede usar el enfoque programático para aplicar tuberías, de hecho, puede crear tuberías personalizadas con este enfoque. La tubería @Input en ngx-dataTable espera una estructura tipo tubería con una transformación: Función. puede hacer cualquier función que devuelva una función de transformación y manipular los datos como desee.
Simplemente puede usar la date pipe para formatear el valor.
{{value | date:'shortDate'}} es equivalente a {{value | date:'ymd'}} que genera una fecha como la siguiente: 22/08/2017
Espero que esto te ayudará
<ng-template #dateColumn let-row="row" let-value="value" let-i="index"> {{value | date:'dd-MM-yyyy'}} </ng-template> export class CvbankListComponent implements OnInit { @ViewChild('dateColumn') dateColumn: TemplateRef<any>; . . . this.columns = [ . . { name: 'Date', prop: 'Date', cellTemplate: this.dateColumn }, ];