Как настроить формат отображения даты в AG-Grid - PullRequest
Новая
       148

Как настроить формат отображения даты в AG-Grid

0 голосов
/ 14 октября 2018

Как установить формат визуализации столбцов даты в AG-Grid?Когда я смотрю на образцы, я вижу даты в форматах дд / мм / гггг, но мои столбцы дат всегда отображаются в довольно длинном формате, который выглядит как «Сб 12 мая 2012 01:00:00 GMT + 0100 (BST)».Я хотел бы использовать формат по умолчанию YYYY-MM-dd с возможностью для пользователей самостоятельно настраивать желаемый формат.Примеры, которые я нашел, показывают, как выполнять пользовательскую фильтрацию с помощью компаратора и тому подобного, но по умолчанию у меня хорошо работает, за исключением того, как на самом деле отображаются даты.

Screenshot

Спасибо, Трой

Ответы [ 4 ]

0 голосов
/ 18 апреля 2019

Это для версии Angular2 +.Если вы используете библиотеку моментов в вашем приложении.Тогда задача действительно проста

В вашем файле .ts: 

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('yyyy-MM-dd');
    },
},

И вы получите:

Дата окончания:2019-10-05

Также для возможности настройки формата даты для пользователей: вы можете добавить выпадающий список где-то в приложении и позволить им выбрать свой стиль даты и использовать указанное выше значениеFormatter и передать функциюдинамически со многими форматами даты, доступными из библиотеки моментов.

Надеюсь, это кому-нибудь пригодится.

0 голосов
/ 15 октября 2018

Я создаю ячейку для этого:

cellRendererFormattedDate = params => {
   var date = $filter("date")(params.value, 'yyyy-MM-dd h:mm:ss a');
   return `<div style="text-align:right;">${date}</div>`;
}

В контроллере убедитесь, что вы ввели $ filter.В ваших columnDefs обязательно определите cellRenderer: cellRendererFormattedDate

0 голосов
/ 16 октября 2018

Хотя средство визуализации ячеек и средство форматирования значений будут работать, я бы использовал valueGetter для столбца примерно так - 

headerName: "Issue Date",
valueGetter: function dateValueGettter(params) {
  var date = $filter("date")(params.getValue("issueDate"), 'yyyy-MM-dd');
  return date;
}

В приведенном выше примере используется фильтр угловых дат.

Преимуществоиспользование метода получения значений заключается в том, что сортировка и фильтрация таких столбцов теперь могут основываться на значениях, возвращаемых методом получения значений.

0 голосов
/ 15 октября 2018

Для этого лучше всего использовать форматтер

https://www.ag -grid.com / javascript-grid-value-getters /

Hopeэто помогает

...