How to change ag-grid date filter placeholder format

Question

I use ag-grid on Reactjs for table display. In the date column, datepicker filter format is mm/dd/yyyy but i need to change it to dd/mm/yyyy. I use agDateColumnFilter for filtering. Date format of data in the rows are correct, they are dd/mm/yyyy but in the filter there is still mm/dd/yyyy. How can i fix this?

I use GetTextFieldAdvancedTable function for each column in grid.

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.

Stamm

i added the codes. – Stamm

It seems you have problem in compareCellDateAndFilterDateFormat(filterLocalDateAtMidnight, cellValue). Can you share that function implementation. – Megadeath

i dont think so, because comparator is ordering the values in date column and it works fine. Also cell's date format is good as dd.mm.yyyy but i have problem with filter area as mm.dd.yyyy. Btw, i added comparator function on post also – Stamm

So you have the problem in the filter area where you have to give mm/dd/yyyy but you want dd/mm/yyyy? – Megadeath

Your filter functionalality is correct. Do you have custom date component for date picker? If yes please show that. – Megadeath

no, i use ag-grid. – Stamm

@Stamm this is old but were you able to find a solution? – Aluminate

Unfortunately no @Chris. – Stamm

Answer 1

Use this Link : https://www.ag-grid.com/react-data-grid/localisation/

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

Gressorial

Answer 2

You can use cellRenderer for date formatting to columnDefs. Also you should add moment to your project.

Or change your region settings to localization

cellRenderer for cell view.

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

filterParams for filter data. When user write filter to text, filter params call this 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;
          }
        }
      }

Scevo

Thanks for your answer but this works for cells not for filter. I need to change the datepicker for datetime filter as dd.mm.yyyy format. I added a screenshot on post now for which part i want to fix. – Stamm

oh i think screenshot couldn't be added because lack of reputation :( – Stamm

i already have comparator function and it works fine for ordering dates as dd.mm.yyyy format. But it doesn't work for filter area. on filter area, when i want to pick a date from datepicker, in datepicker it is mm/dd/yyyy format there. I tried your comparator function also, but it doesn't solve the issue about datepicker's format. – Stamm

Can you change region/time settings for your localization? – Scevo

yeah that works, i tried that because it takes regional settings from chrome but i can't make all customers change their settings because i have default settings and encountering such a problem. – Stamm

Mate, i changed regional settings before you wrote but like i said i can't make all customers change their settings so it is not a solution for me. I need to change filter date format to dd/mm/yyyy independent from chrome or system date format. I applied your answer but it doesn't work.. i think ag-grid doesn't allow to change date format of datepicker filter. – Stamm

@ns.altun, Did you find any solution, I am facing similar challenge. I need to make filter placeholder dynamic, based on user preference. dd/mm/yy or dd-mm-yy or any other. – Counterfoil