如何更改 ag-grid 日期过滤器占位符格式

Question

我在Reactjs上使用ag-grid进行表格显示。在日期列中，日期选择器过滤器格式是mm/dd/yyyy，但我需要将其更改为dd/mm/yyyy. 我用来agDateColumnFilter过滤。行中数据的日期格式是正确的，它们是 dd/mm/yyyy，但在过滤器中仍然有mm/dd/yyyy. 我怎样才能解决这个问题？

\n\n

我对网格中的每一列使用 GetTextFieldAdvancedTable 函数。

\n\n

function GetTextFieldAdvancedTable(\n  field,\n  headerName,\n  width,\n  editable = false,\n  hide = false,\n  sort = "",\n  rowGroup = false,\n  rowDrag = false,\n  filter = "agTextColumnFilter",\n  menuTabs = ["filterMenuTab"],\n  filterParams = {\n    textFormatter: function(r) {\n      if (r == null) return null;\n      r = r.replace(new RegExp("\xc4\xb0", "g"), "i");\n      r = r.replace(new RegExp("\xc4\x9e", "g"), "\xc4\x9f");\n      r = r.replace(new RegExp("\xc3\x87", "g"), "\xc3\xa7");\n      r = r.replace(new RegExp("I", "g"), "\xc4\xb1");\n      r = r.replace(new RegExp("\xc3\x96", "g"), "\xc3\xb6");\n      r = r.replace(new RegExp("\xc5\x9e", "g"), "\xc5\x9f");\n      r = r.replace(new RegExp("\xc3\x9c", "g"), "\xc3\xbc");\n      r = r.toLowerCase();\n      return r;\n    }\n  }\n) {\n  return {\n    field,\n    headerName,\n    width,\n    editable,\n    hide,\n    sort,\n    rowGroup,\n    rowDrag,\n    filter,\n    menuTabs,\n    filterParams\n  };\n}\n\nconst UpdateDate = () =>\n  GetTextFieldAdvancedTable(\n    "updateDate",\n    trans.t("lblLastUpdateDate"),\n    120,\n    false,\n    false,\n    "desc",\n    false,\n    false,\n    "agDateColumnFilter",\n    ["filterMenuTab"],\n    {\n      browserDatePicker: false,\n      comparator: function(filterLocalDateAtMidnight, cellValue) {\n        return compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue);\n      }\n    }\n  );\n

\n\n

比较器功能：

\n\n

 function compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue) {\n            if (cellValue === null) return 0;\n            const cellDate = cellValue.split(" ")[0];\n            const filterDateFormat = moment(filterLocalDateAtMidnight).format("DD.MM.YYYY");\n            return cellDate < filterDateFormat ? -1 : cellDate > filterDateFormat ? 1 : 0;}\n

\n\n

这是过滤器的屏幕截图

\n\n

谢谢。

\n

Answer 1

您可以将cellRenderer日期格式化为columnDefs. 您还应该添加moment到您的项目中。

或者将您的区域设置更改为本地化

cellRenderer用于单元格视图。

  cellRenderer: data => {
    return data.value != undefined ? moment(data.value).format("dd/mm/yyyy") : null;
  }

filterParams用于过滤数据。当用户将过滤器写入文本时，过滤器参数调用此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;
          }
        }
      }