Установите формат столбца даты в devextreme DataGrid с угловым 2

Question

У меня есть devextreme datagrid, работающий в моем проекте angular2. Однако в столбце с типом данных date отображается полная дата JavaScript в следующем формате: гггг-мм-ддтчч: мм: сс. Я хотел бы установить формат для этого столбца на что-то более удобное для пользователя, например, 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. И я тоже не получаю никаких исключений в консоли.

Answer 1

Я нашел ответ сам через некоторое время. Проблема заключается в том, что вы должны установить свойство dataType столбца в date, иначе настройка форматирования даты будет проигнорирована. Это работает:

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

Answer 2

Ответ, упомянутый выше, работает нормально, если вы хотите использовать каналы (может быть для некоторого дополнительного форматирования или чего-либо еще), вы можете использовать cellTemplate, ниже приведен фрагмент кода

    <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>

Answer 3

• как только вы изменили dataType="date", то компоненты devexpress достаточно умен, чтобы уловить формат из вашего пользовательского канала angular, если вы передали его в качестве формата format="myFormatPipe.
• или вы можете просто сделать это, вы можете сделать это:

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

Answer 4

Это показывалось 1 день назад. Изменения ниже сработали для меня format=dd-MM-yyyy" To [format]="{ type: 'dd-MM-yyyy' }"