反应日期时间选择器中的 AG-Grid 时间戳与数据值/AG-Grid 日期时间过滤器不匹配

Question

DEMO ON STACK BLITZ

我在我的一个 React 项目中使用AG-Grid，一个数据表包。此表包含一组 DateTime 值。为了过滤表中的 DateTime 值，我使用了example DateTime filter provided by the AG-Grid documentation 的略微修改版本，它使用了Flatpickr package。

我表中的 DateTime 值采用 ISO 字符串格式。当我通过日历和时钟进行选择时，过滤器输入中的值与我在日历上选择的值不同，并且它们与表格单元格中的值不匹配。

这是一个屏幕截图，显示了日历选择和输入之间的区别：

这里是应用过滤器的结果的屏幕截图，以及它们与输入的不匹配情况：

我被这个问题困扰了很长时间，所以如果有人能帮我弄清楚为什么输入、日历和过滤结果中的值不匹配，那将是一个很大的帮助。

DEMO ON STACK BLITZ

---

DataGrid.jsx (AG-Grid Docs for reference)

import React, { useState } from 'react';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import DateTimePicker from './DateTimePicker';
import DATES from './data/DATES.json';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const DataGrid = () => {
  const [rowData, setRowData] = useState(DATES);

  const COLUMN_DEFINITION = [
    {
      field: 'dateTime',
      headerName: 'Date Time',
      filter: 'agDateColumnFilter',
      filterParams: {
        defaultOption: 'inRange',
        // Filtering function for DateTime values:
        comparator: function(filterLocalDate, cellValue) {
          filterLocalDate = new Date(filterLocalDate);
          cellValue = new Date(cellValue);
          let filterBy = filterLocalDate.getTime();
          let filterMe = cellValue.getTime();
          if (filterBy === filterMe) {
            return 0;
          }

          if (filterMe < filterBy) {
            return -1;
          }

          if (filterMe > filterBy) {
            return 1;
          }
        }
      }
    }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={COLUMN_DEFINITION}
        rowData={rowData}
        defaultColDef={{
          sortable: true,
          filter: true,
          filterParams: {
            buttons: ['apply', 'clear', 'reset', 'cancel']
          }
        }}
        frameworkComponents={{
          agDateInput: DateTimePicker
        }}
      />
    </div>
  );
};

export default DataGrid;

DateTimePicker.jsx (Flatpickr Docs for reference)：

import React, {
  useEffect,
  useState,
  useRef,
  forwardRef,
  useImperativeHandle
} from 'react';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.min.css';

export default forwardRef((props, ref) => {
  const [date, setDate] = useState(null);
  const [picker, setPicker] = useState(null);
  const refFlatPickr = useRef();
  const refInput = useRef();

  const onDateChanged = selectedDates => {
    const [selectedDate] = selectedDates;
    setDate(selectedDate);
    props.onDateChanged();
  };

  useEffect(() => {
    setPicker(
      flatpickr(refFlatPickr.current, {
        onChange: onDateChanged,
        dateFormat: 'Z',
        wrap: true,
        enableTime: true,
        enableSeconds: true,
        time_24hr: true
      })
    );
  }, []);

  useEffect(() => {
    if (picker) {
      picker.calendarContainer.classList.add('ag-custom-component-popup');
    }
  }, [picker]);

  useEffect(() => {
    if (picker) {
      picker.setDate(date);
    }
  }, [date, picker]);

  useImperativeHandle(ref, () => ({
    getDate() {
      return date;
    },

    setDate(date) {
      setDate(date);
    },

    setInputPlaceholder(placeholder) {
      if (refInput.current) {
        refInput.current.setAttribute('placeholder', placeholder);
      }
    },

    setInputAriaLabel(label) {
      if (refInput.current) {
        refInput.current.setAttribute('aria-label', label);
      }
    }
  }));

  return (
    <div
      className="ag-input-wrapper custom-date-filter"
      role="presentation"
      ref={refFlatPickr}
    >
      <input type="text" ref={refInput} data-input style={{ width: '100%' }} />
      <a class="input-button" title="clear" data-clear>
        <i class="fa fa-times" />
      </a>
    </div>
  );
});

Answer 1

我对您的示例做了两处更改：

1. 注释掉日期选择器内的属性dateFormat: 'Z'。这导致所选日期和日期选择器输入框中的日期具有不同的格式。
2. 在filterParams.comparator 内，我删除了附加在cellValue 字符串末尾的“Z”。似乎在调用new Date(cellValue) 时，日期没有给出正确的小时值作为cellValue 字符串。所以为了解决这个问题，我只是删除了'Z'：

cellValue = new Date(cellValue.slice(0, -1));

在这里看到这个实现：https://stackblitz.com/edit/react-6dwqvh?file=src%2FDataGrid.jsx