我在Reactjs上使用ag-grid进行表格显示。在日期列中,日期选择器过滤器格式为mm/dd/yyyy
,但我需要将其更改为dd/mm/yyyy
。我使用agDateColumnFilter
进行过滤。行中数据的日期格式正确,它们是dd/mm/yyyy,但在过滤器中仍然存在mm/dd/yyyy
。我如何修复此问题?
我对网格中的每一列使用GetTextFieldAdvancedTable函数。
function GetTextFieldAdvancedTable(
field,
headerName,
width,
editable = false,
hide = false,
sort = "",
rowGroup = false,
rowDrag = false,
filter = "agTextColumnFilter",
menuTabs = ["filterMenuTab"],
filterParams = {
textFormatter: function(r) {
if (r == null) return null;
r = r.replace(new RegExp("İ", "g"), "i");
r = r.replace(new RegExp("Ğ", "g"), "ğ");
r = r.replace(new RegExp("Ç", "g"), "ç");
r = r.replace(new RegExp("I", "g"), "ı");
r = r.replace(new RegExp("Ö", "g"), "ö");
r = r.replace(new RegExp("Ş", "g"), "ş");
r = r.replace(new RegExp("Ü", "g"), "ü");
r = r.toLowerCase();
return r;
}
}
) {
return {
field,
headerName,
width,
editable,
hide,
sort,
rowGroup,
rowDrag,
filter,
menuTabs,
filterParams
};
}
const UpdateDate = () =>
GetTextFieldAdvancedTable(
"updateDate",
trans.t("lblLastUpdateDate"),
120,
false,
false,
"desc",
false,
false,
"agDateColumnFilter",
["filterMenuTab"],
{
browserDatePicker: false,
comparator: function(filterLocalDateAtMidnight, cellValue) {
return compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue);
}
}
);
比较器功能:
function compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue) {
if (cellValue === null) return 0;
const cellDate = cellValue.split(" ")[0];
const filterDateFormat = moment(filterLocalDateAtMidnight).format("DD.MM.YYYY");
return cellDate < filterDateFormat ? -1 : cellDate > filterDateFormat ? 1 : 0;}
2条答案
按热度按时间p3rjfoxz1#
使用此链接:https://www.ag-grid.com/react-data-grid/localisation/
hivapdat2#
您可以使用
cellRenderer
将日期格式设置为columnDefs
。此外,您还应该将moment
添加到您的项目中。或将区域设置更改为本地化
cellRenderer
用于单元格视图。filterParams
用于筛选器数据。当用户将筛选器写入文本时,筛选器参数调用此function