Filtering by date ranges is not working

[junplid]

• what edition are you using - community
• version for @inovua/reactdatagrid-community: '^5.10.2'

Relevant code or config

import ReactDataGrid from "@inovua/reactdatagrid-community";
import "@inovua/reactdatagrid-community/index.css";
import "@inovua/reactdatagrid-community/theme/default-dark.css";
import moment from "moment";
import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
import SelectFilter from "@inovua/reactdatagrid-community/SelectFilter";
import DateFilter from "@inovua/reactdatagrid-community/DateFilter";
import {
  TypeColumn,
  TypeFilterValue,
} from "@inovua/reactdatagrid-community/types";

const initialFilterValue = [
  ...
  {
    name: "birthDate",
    operator: "inrange",
    type: "date",
    value: "",
  }
] as TypeFilterValue;

const columns: TypeColumn[] = [
  ...
  {
    dateFormat: "MM-DD-YYYY",
    name: "birthDate",
    header: "Birth date",
    defaultFlex: 1,
    minWidth: 200,
    type: "date",
    filterEditor: DateFilter,
    filterEditorProps: (props: any, { index }: any) => {
      // for range and notinrange operators, the index is 1 for the after field
      return {
        dateFormat: "MM-DD-YYYY",
        cancelButton: false,
        highlightWeekends: false,
        placeholder:
          index == 1 ? "Created date is before..." : "Created date is after...",
      };
    },
    render: ({ value, cellProps }: any) => {
      return moment(value).format("MM-DD-YYYY");
    },
  },
];

export const Component: React.FC = (): JSX.Element => {
  const [filterValue, setFilterValue] =
    useState<TypeFilterValue>(initialFilterValue);

  return (
    <ReactDataGrid
      idProperty="id"
      theme="default-dark"
      style={gridStyle}
      handle={setGridRef}
      defaultFilterValue={filterValue}
      columns={columns}
      dataSource={people}
      onFilterValueChange={setFilterValue}
    />
  );
}

What you did: tried to implement the date range filtering (inrange) with the code above.

What happened: the filter does not work when selecting the date range

console browser:

react-dom.development.js:86 Warning: React does not recognize the `endInput` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `endinput` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Uncaught TypeError: moment is not a function
    at render (index.tsx?t=1695176003393:263:12)
    at InovuaDataGridCell (index.js:1106:30)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)

I'm using Vite in version: ^4.4.5 and ReactJS in version: ^18.2.0 @inovua-admin I thank you in advance, and I apologize for anything

[junplid]

I apologize for my inattention, I looked at the documentation at: https://reactdatagrid.io/docs/filtering#date-filters

and a little more at: https://github.com/inovua/reactdatagrid/blob/master/examples/pages/filters/date-filter.page.tsx#L20

which has this code:

import moment from 'moment';
import { getGlobal } from '@inovua/reactdatagrid-community/getGlobal';

const globalObject = getGlobal();

let window = globalObject || globalThis;

if ((window as any).moment == null) {
  (window as any).moment = moment;
}

I inserted this code in the /src/main.tsx file and it ended up looking like this: The application is working as expected

import "./App.css";
import ReactDOM from "react-dom/client";
import App from "./App";
import { CookiesProvider } from "react-cookie";
import moment from "moment";
import { getGlobal } from "@inovua/reactdatagrid-community/getGlobal";

const globalObject = getGlobal();

let window = globalObject || globalThis;

if ((window as any).moment == null) {
  (window as any).moment = moment;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <CookiesProvider>
    <App />
  </CookiesProvider>
);

[Eric2048]

The solution above does not address the other error that @junplid reported: react-dom.development.js:86 Warning: React does not recognize theendInputprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseendinputinstead. If you accidentally passed it from a parent component, remove it from the DOM element. . This error occurs when switching the Date Filter from "On" to "In Range" in the menu.