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

Posted 2023-03-05

【中文标题】如何更改 ag-grid 日期过滤器占位符格式

【英文标题】：How to change ag-grid date filter placeholder format

【发布时间】：2020-01-17 07:40:37

【问题描述】：

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

here is a screenshot of filter

谢谢。

【问题讨论】：

我添加了代码。

compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue) 好像有问题。你能分享那个功能实现吗？

我不这么认为，因为比较器正在对日期列中的值进行排序，并且工作正常。此外，单元格的日期格式与 dd.mm.yyyy 一样好，但我在过滤区域为 mm.dd.yyyy 时遇到问题。顺便说一句，我还在帖子上添加了比较器功能

所以您在过滤器区域遇到问题，您必须提供mm/dd/yyyy 但您想要dd/mm/yyyy？

您的过滤器功能正确。你有日期选择器的自定义日期组件吗？如果是，请出示。

【参考方案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;
          
        
      

【讨论】：

感谢您的回答，但这适用于不适用于过滤器的单元格。我需要将日期时间过滤器的日期选择器更改为 dd.mm.yyyy 格式。我现在在帖子上添加了我要修复的部分的屏幕截图。

哦，我认为由于缺乏声誉而无法添加屏幕截图:(

我已经有比较器功能，它可以很好地以 dd.mm.yyyy 格式订购日期。但它不适用于过滤区域。在过滤器区域，当我想从 datepicker 中选择一个日期时，在 datepicker 中它是 mm/dd/yyyy 格式。我也尝试了您的比较器功能，但它没有解决有关日期选择器格式的问题。

您可以更改本地化的区域/时间设置吗？

伙计，我在你写之前更改了区域设置，但就像我说的，我不能让所有客户都更改他们的设置，所以这不是我的解决方案。我需要将过滤器日期格式更改为 dd/mm/yyyy，独立于 chrome 或系统日期格式。我应用了您的答案，但它不起作用..我认为 ag-grid 不允许更改 datepicker 过滤器的日期格式。