Reactjs 如何更改ag网格日期过滤器占位符格式

我在Reactjs上使用ag网格来显示表格。在date列中，datepicker筛选器格式为

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

函数compareCellDate和FilterDateFormat（filterLocalDateAtMidnight，cellValue）{
if（cellValue==null）返回0；
常量cellDate=cellValue.split（“”[0]；
const filterDateFormat=时刻（filterLocalDateAtMidnight）。格式（“DD.MM.YYYY”）；
返回cellDatefilterDateFormat？1:0；}

---

谢谢。

您可以使用

cellRenderer

将日期格式化为

columnDefs

。此外，您还应该向项目中添加

moment

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

cellRenderer

用于单元视图

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

filterParams

用于筛选数据。当用户将筛选器写入文本时，筛选器参数调用此

函数

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

过滤器参数：{
browserDatePicker：没错，
条件：正确，
比较器：函数（filterLocalDateAtMidnight，cellValue）{
var inputs=document.getElementsByClassName（“ag过滤器”）；
对于（变量i=0；ifilterLocalDateAtMidnight）{
返回1；
}
}
}

您可以使用

cellRenderer

将日期格式化为

columnDefs

。此外，您还应该向项目中添加

moment

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

cellRenderer

用于单元视图

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

filterParams

用于筛选数据。当用户将筛选器写入文本时，筛选器参数调用此

函数

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

过滤器参数：{
browserDatePicker：没错，
条件：正确，
比较器：函数（filterLocalDateAtMidnight，cellValue）{
var inputs=document.getElementsByClassName（“ag过滤器”）；
对于（变量i=0；ifilterLocalDateAtMidnight）{
返回1；
}
}
}

我添加了代码。您似乎在

比较CellDate和FilterDate格式（filterLocalDateAtMidnight，cellValue）方面有问题。

。我不这么认为，因为comparator正在对date列中的值进行排序，所以它工作得很好。此外，单元格的日期格式与dd.mm.yyyy一样好，但我对mm.dd.yyyy的过滤区域有问题。顺便说一句，我在post ALSOS上添加了比较器功能，因此您在过滤区域中遇到问题，您必须给出

mm/dd/yyyy

，但您需要

dd/mm/yyyyy

？您的过滤功能是正确的。您有日期选择器的自定义日期组件吗？如果是，请显示。我添加了代码。您似乎在

比较CellDate和FilterDate格式（filterLocalDateAtMidnight，cellValue）

方面有问题。我不这么认为，因为comparator正在对date列中的值进行排序，所以它工作得很好。此外，单元格的日期格式与dd.mm.yyyy一样好，但我对mm.dd.yyyy的过滤区域有问题。顺便说一句，我在post ALSOS上添加了比较器功能，因此您在过滤区域中遇到问题，您必须给出

mm/dd/yyyy

，但您需要

dd/mm/yyyyy

？您的过滤功能是正确的。您有日期选择器的自定义日期组件吗？如果是，请显示。谢谢您的回答，但这适用于电池，而不是过滤器。我需要将datetime筛选器的日期选择器更改为dd.mm.yyyy格式。我现在在帖子中添加了一个我想修复的部分的截图。哦，我认为无法添加截图，因为缺乏声誉：（我已经有了comparator函数，它可以按dd.mm.yyyy格式对日期进行排序。但它不适用于筛选区域。在筛选区域，当我要从datepicker中选择日期时，datepicker中的日期格式是mm/dd/yyyy。我也尝试了comparator函数，但它无法解决有关datepicker格式的问题。您能更改datepicker吗本地化的登录/时间设置？伙计，在你写之前，我更改了区域设置，但正如我所说，我无法让所有客户更改他们的设置，因此这不是我的解决方案。我需要将筛选日期格式更改为dd/mm/yyyyy，独立于chrome或系统日期格式。我应用了你的答案，但不起作用。我想可以esn不允许更改datepicker筛选器的日期格式。谢谢您的回答，但这适用于不适用于筛选器的单元格。我需要将datepicker for datetime筛选器更改为dd。