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

Question

我正在使用 AG-Grid, a data table package, in a React project of mine. This table holds a set of DateTime values. In order to filter the DateTime values in the table, I am using a slightly modified version of the example DateTime filter provided by the AG-Grid documentation, which uses the Flatpickr package。

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

这是显示日历选择和输入之间差异的屏幕截图：

下面是应用过滤器的结果截图以及它们如何与输入不匹配：

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

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

我对你的例子做了两处修改：

注释掉日期选择器中的属性 dateFormat: 'Z'。这导致所选日期和日期选择器输入框中的日期具有不同的格式。
在 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

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

React AG-Grid Time Stamps in DateTime Picker not matching with data values / AG-Grid datetime filter

javascript

datetime

reactjs

ag-grid

flatpickr