如何更改 ag-grid 日期過濾器占位符格式

Question

我在 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;}

這是過濾器的屏幕截圖

謝謝你。

Answer 1

使用此鏈接： https ://www.ag-grid.com/react-data-grid/localisation/

localeText={{  dateFormatOoo: 'MM-DD-YYYY'}}

Answer 2

您可以使用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;
          }
        }
      }