使用角度 2 在 devextreme DataGrid 中设置日期列的格式答案

【问题标题】：Set the format of a date column in devextreme DataGrid with angular 2使用角度 2 在 devextreme DataGrid 中设置日期列的格式
【发布时间】：2017-05-18 13:01:29
【问题描述】：

我的 angular2 项目中有一个 devextreme 数据网格。但是，具有日期数据类型的列仅以这种格式显示完整的 javascript 日期：yyyy-MM-ddTHH:mm:ss。我想将此列的格式设置为对用户更友好的格式，例如 dd.MM.yyyy（欧洲风格）。

但是直到现在我所有设置日期格式的尝试都没有成功。

以下是我到目前为止在组件模板中的内容：

    <dx-data-grid [dataSource]="tasks">
        <dxi-column dataField="barcode" ></dxi-column>
        <dxi-column dataField="receiptDate" format="shortDate">
            <dxo-format type="shortDate"></dxo-format> 
        </dxi-column>
    </dx-data-grid>

不幸的是，设置格式的类型并没有改变任何东西——我仍然得到这个未格式化的 JS 日期字符串。而且我在控制台中也没有任何异常。

【问题讨论】：

我对 devexpress 一点也不熟悉，但你不能用 angular date pipe 来做这个吗：[dataField]="receiptDate | date:'short'"？
@und3rTow 感谢您的输入 - 不幸的是，此时管道无效 - 但我同时找到了解决方案

标签： angular typescript devexpress devextreme

【解决方案1】：

一段时间后我自己找到了答案。问题是您必须将列的 dataType 属性设置为日期 - 否则日期格式设置将被忽略。这是有效的：

<dx-data-grid [dataSource]="tasks">
    <dxi-column dataField="barcode" ></dxi-column>
    <dxi-column dataField="receiptDate" dataType="date" format="shortDate"></dxi-column>
</dx-data-grid>

【讨论】：

【解决方案2】：

上面提到的答案很好，如果你想使用管道（可能是一些额外的格式或任何东西）你可以使用 cellTemplate ，下面是代码sn-p

    <dx-data-grid [dataSource]="assessments" [height]="gridHeight" [hoverStateEnabled]="true" 
                width="100%">
                <dxi-column dataField="assessDate" dataType="date" [caption]="assessDate" cellTemplate="dateCell"></dxi-column>
                <div *dxTemplate="let cellData of 'dateCell'">
                    {{cellData.value | date: 'dd-MMM-yy'}}
                </div>
            </dx-data-grid>

【讨论】：

【解决方案3】：

一旦您修改了dataType="date"，那么如果您以format="myFormatPipe 的格式传递，devexpress 组件就会足够智能地从您的自定义角度管道中捕获格式。
或者您可以这样做，您可以这样做：

<dxi-column
  dataField="receiptDate"
  dataType="date"
  format="dd/MM/yyyy"
></dxi-column>

【讨论】：

【解决方案4】：

它在 1 天前显示。以下更改对我有用 format=dd-MM-yyyy" 到 [format]="{ type: 'dd-MM-yyyy' }"

【讨论】：