Custom Date picker cell editor for react-data-grid

Question

Unable to create a custom date picker cell editor for an editable react-data-grid. using the below version of data-grid

I have tried using below react-datepicker library as per my project setup and the dependent date-fns library. Using the datepicker I have developed the below react component for datepicker.

"date-fns": "^3.3.1",
"react-datepicker": "^4.25.0"
"react-data-grid": "^7.0.0-canary.49"

Case #1 using react-datepicker

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DatePickerCellEditor = ({ column, rowIdx, row, onRowChange, onClose }) => {

  console.log(column, rowIdx, row, column.key, row[column.key]);

  const [selectedDate, setSelectedDate] = useState(new Date(row[column.key]));

  const handleChange = (date) => {
    setSelectedDate(date);
    onRowChange({ ...row, [column.key]: selectedDate ? selectedDate : null }, true);
    onClose();
  };

  return (
      <DatePicker
        placeholderText="DD/MM/YYYY"
        selected={selectedDate}
        onChange={handleChange}
      />
  );
};

DatePickerCellEditor.propTypes = {
  column: PropTypes.object.isRequired,
  rowIndex: PropTypes.number.isRequired,
  rowData: PropTypes.object.isRequired,
  onRowChange: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default DatePickerCellEditor;

using the same in my grid as below.

{
          key: "agreementDate",
          name: t("Agreement Date"),
          filterable: true,
          sortable: true,
          editor: DatePickerCellEditor,
          filterRenderer: DateFilter,
          formatter: DateFormatter,
        },

I have even tried using a semantic-ui form input as well for the custom input option of datepicker. I issue is that the datepicker popper is seen inside the grid cell but appended to the body tag. which is making it inside the cell and not selectable.

I wanted to know how a datepicker editor should be used for react-datagrid. is there any samples that I can go with. Please help.

case #2 - Using react-datepicker and semantic-ui

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import SemanticDatePicker from "./SemanticDatePicker";

const DatePickerCellEditor = ({ column, rowIdx, row, onRowChange, onClose }) => {

  console.log(column, rowIdx, row, column.key, row[column.key]);

  const [selectedDate, setSelectedDate] = useState(new Date(row[column.key]));

  const handleChange = (date) => {
    setSelectedDate(date);
    onRowChange({ ...row, [column.key]: selectedDate ? selectedDate : null }, true);
    onClose();
  };

  return (
      <DatePicker
        placeholderText="DD/MM/YYYY"
        selected={selectedDate}
        onChange={handleChange}
        customInput={<SemanticDatePicker />}
      />
  );
};

DatePickerCellEditor.propTypes = {
  column: PropTypes.object.isRequired,
  rowIndex: PropTypes.number.isRequired,
  rowData: PropTypes.object.isRequired,
  onRowChange: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default DatePickerCellEditor;

import React from 'react';
import { Form, Icon } from 'semantic-ui-react';

const SemanticDatePicker = (props) => {
  const handleKeyPress = (event) => {
    const charCode = event.which ? event.which : event.keyCode;
    const char = String.fromCharCode(charCode);
    const isValidChar = /\d|\//.test(char); // Allow digits and hyphen (date-related character)

    if (!isValidChar) {
      event.preventDefault();
    }
  };

  return (
    <Form.Input
      id={props.id}
      label={props.label}
      icon={<Icon name="calendar alternate outline" className="blue inverted circular link" onClick={props.onClick} />}
      placeholder={props.placeholder}
      value={props.value}
      onClick={props.onClick}
      onChange={props.onChange}
      disabled={props.disabled}
      readOnly={props.readOnly}
      autoComplete="off"
      onKeyPress={handleKeyPress}
    />
  );
};

export default SemanticDatePicker;