Material-UI Data Grid - Filtering by Date with UNIX Timestamp

user_14217141 0
Viewed 5990

PROBLEM: Custom formatted date is not filterable (though it is sortable).

Screenshot of formatted date

The date data comes from in firebase seconds(same as a UNIX timestamp), nanoseconds format & is then translated first into a Javascript date/time format(Tue Apr 13 2021 00:27:20 GMT-0400 (Eastern Daylight Time)), then the format in the screenshot (Apr 13, 2021).

My expectation is that the issue I'm running into is that I can't format the date this way (Apr 13, 2021) and filter - the only way to filter is to format the date MM/DD/YYYY.

Column definition:

{
    flex: 1,
    field: 'created',
    headerName: 'Created',
    type: 'date',
    valueFormatter: (params: GridValueFormatterParams) => {
      // first converts to JS Date, then to locale option through date-fns
      return formatDate(params.value);
    }
  },

Is there any way to make this column filterable without formatting the date as MM/DD/YYYY?

EDIT: I tried formatting the date as MM/DD/YYYY & the filter still fails. See screenshots below - there should be multiple dates that match the filter.

Prior to filter: Data Grid with 4/13 date

With filter: Data Grid with filter applied & no matching results

material-ui typescript reactjs
2 Answers

you can read this

just add valueGetter like this:

{
flex: 1,
field: 'created',
headerName: 'Created',
type: 'date',
valueFormatter: (params: GridValueFormatterParams) => {
  // first converts to JS Date, then to locale option through date-fns
  return formatDate(params.value);
},
// valueGetter for filtering
valueGetter: (params: GridValueGetterParams) => {
  return formatDate(params.value);
}},
user_155441490

I believe you need a valueParser to filter by user entered formatted date, converting it back into timestamp or a date object to be read during the filter. Essentially create the inverse of your valueFormatter.

Edit: I'm working on a similar issue and found a solution: I made a hidden field for the timestamp: { field: 'timestamp', hide: true},

Then my date field works as follows:

{ field: 'date', headerName: 'Date', width: 150,
    type: 'date',
    valueGetter: (params) => `${new Date(params.getValue(params.id, 'timestamp'))}`,
    sortComparator: (v1, v2, param1, param2) =>
      param1.api.getCellValue(param1.id, 'timestamp') -
      param2.api.getCellValue(param2.id, 'timestamp'),
    valueFormatter: (params) => { return formatDate(params.value);},
user_123002000
Related