[英]How to change ag-grid date filter placeholder format
I use ag-grid on Reactjs for table display.我在 Reactjs 上使用 ag-grid 进行表格显示。 In the date column, datepicker filter format is
mm/dd/yyyy
but i need to change it to dd/mm/yyyy
.在日期列中,日期选择器过滤器格式为
mm/dd/yyyy
但我需要将其更改为dd/mm/yyyy
。 I use agDateColumnFilter
for filtering.我使用
agDateColumnFilter
进行过滤。 Date format of data in the rows are correct, they are dd/mm/yyyy but in the filter there is still mm/dd/yyyy
.行中数据的日期格式是正确的,它们是 dd/mm/yyyy 但在过滤器中仍然存在
mm/dd/yyyy
。 How can i fix this?我怎样才能解决这个问题?
I use GetTextFieldAdvancedTable function for each column in grid.我对网格中的每一列使用 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);
}
}
);
comparator function :比较器功能:
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;}
here is a screenshot of filter这是过滤器的屏幕截图
Thank you.谢谢你。
使用此链接: https ://www.ag-grid.com/react-data-grid/localisation/
localeText={{ dateFormatOoo: 'MM-DD-YYYY'}}
You can use cellRenderer
for date formatting to columnDefs
.您可以使用
cellRenderer
对columnDefs
进行日期格式设置。 Also you should add moment
to your project.此外,您应该为您的项目添加
moment
。
Or change your region settings to localization或将您的区域设置更改为本地化
cellRenderer
for cell view. cellRenderer
用于单元格视图。
cellRenderer: data => {
return data.value != undefined ? moment(data.value).format("dd/mm/yyyy") : null;
}
filterParams
for filter data. filterParams
用于过滤数据。 When user write filter to text, filter params call this function
当用户将过滤器写入文本时,过滤器参数会调用此
function
filterParams: {
browserDatePicker: true,
suppressAndOrCondition: true,
comparator: function(filterLocalDateAtMidnight, cellValue) {
var inputs = document.getElementsByClassName("ag-filter-filter");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
var dateAsString = cellValue;
if (dateAsString == null) return -1;
var dateParts = dateAsString.split("-");
var cellDate = new Date(Number(dateParts[0]), Number(dateParts[1]) - 1, Number(dateParts[2].substr(0, 2)));
if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
return 0;
}
if (cellDate < filterLocalDateAtMidnight) {
return -1;
}
if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.