问DateTime选择器中的AG-Grid时间戳与数据值不匹配/AG-网格日期时间筛选器

EN

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;

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>
  );
});