如何将字符串转换为动态生成的Mat表中的日期类型

时间:2019-02-12 07:41:16

标签: javascript html angular typescript

我有一个垫子表,其中显示列日期,时间段之前和时间段之后。 HTML代码:-

<ng-container
            matColumnDef="{{ column }}"
            *ngFor="let column of columnsToDisplay"
        >
            <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
            <td mat-cell *matCellDef="let element">
                {{ element[column]  }}
            </td>
        </ng-container>

TypeScript代码:

columnsToDisplay = [
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod'
];
executionDate: string = new Date().toISOString().slice(0, 10);

如果我使用管道{{ element[column] | date: 'yyyy-MM-dd'}}将字符串类型的日期显示为日期类型,则无法看到时间段之前和之后。 如何仅以“ yyyy-MM-dd”查看日期

3 个答案:

答案 0 :(得分:0)

我的建议是使用angular momentjs

因此,可以将其过滤器用作

{{ element[column] | amParse: 'YYYY-MM-DDTHH:mm:ss.SSSSZ' | amDateFormat: 'yyyy-MM-dd' }}

答案 1 :(得分:0)

  

另一个想法是,您可以将字符串日期转换为“ yyyy-MM-dd”   格式化并替换为string-date。

link应该会为您提供帮助。

答案 2 :(得分:0)

创建管道:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
  name: 'momentPipe',
  pure: false
})
export class MomentPipe implements PipeTransform {

  constructor() { }

  transform(value: string, dateFormat: string): any {
        return moment(value).format(dateFormat);
    }
}

然后使用html:

<span >{{ element[column] | momentPipe: 'dddd D MMM YYYY' }}</span>  

此方法需要moment 查看更多here格式