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

Question

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

1

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

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

Troy Peterson 14 окт. 2018, в 15:08

Источник

Теги:

javascript

ag-grid

ag-grid-react

4 ответа

Ещё вопросы

Ragavan Rajan · Answer 1 · 2019-04-17T20-34-00.000Z

Это для версии 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

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

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

Для меня этот способ заканчивается отображением «Неверная дата» в ячейке ... :(
@TheCuBeMan Тогда я думаю, что ваше значение - строка. Вы должны сначала преобразовать его в Date, а затем использовать вышеуказанную функцию
Обновил мой ответ для вашей доброй ссылки. Пожалуйста, проверьте

Pratik Bhat · Answer 2 · 2018-10-16T02-59-00.000Z

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

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

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

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

Если я правильно понимаю, идея состоит в том, чтобы просто вернуть его в виде строки в выборке с сервера, и это то, что отображается. Я был в состоянии изменить мою выборку, чтобы соответствующим образом десериализовать их в объекты даты уже, а затем работает сортировка и подбор. Недостатком вашего подхода, который я вижу, является то, что I18N или пользовательское форматирование необходимо будет применить на стороне сервера перед отправкой результатов клиенту. Это может быть не так уж и плохо, но это делает код на стороне сервера, как минимум, универсальным, если ему нужно знать, кому он отправляет данные, и форматировать его соответствующим образом для каждого клиента.

Dan Obregon · Answer 3 · 2018-10-15T15-49-00.000Z

Для этого я создаю средство визуализации ячеек:

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

Убедитесь, что в вашем контроллере введен фильтр $.
В вашем столбцеDefs обязательно укажите cellRenderer: cellRendererFormattedDate

Простите за незнание JavaScript, но что такое $ filter и как мне его внедрить. Это класс, предоставленный реагировать?
Извините за поздний ответ, я не видел вашего вопроса. $ filter - это угловой API. Ссылка содержит подробную информацию об этом.
Ах, я использую React. Я думал, что указал это в вопросе, но это не похоже, что я сделал.

Alberto Gutierrez · Answer 4 · 2018-10-15T12-45-00.000Z

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

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

Надеюсь это поможет