使用 ag-grid 编辑单元格的自定义日期选择器

Question

我正在尝试在单元格编辑中实现日期选择器。 我试过下面的例子

https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing

这个例子使用了 jquery-ui datepicker

function getDatePicker() {
  function Datepicker() {}
  Datepicker.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.value = params.value;
    $(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
  };
  Datepicker.prototype.getGui = function() {
    return this.eInput;
  };
  Datepicker.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
  };
  Datepicker.prototype.getValue = function() {
    return this.eInput.value;
  };
  Datepicker.prototype.destroy = function() {};
  Datepicker.prototype.isPopup = function() {
    return false;
  };
  return Datepicker;
}

这条线

$(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });

用于添加jquery-ui datepicker

我怎样才能拥有一个我想要包含的自定义 DatePicker 反应组件而不是 jquery-ui datepicker？

Answer 1

您需要实现interface ICellEditorComp {...}关于自定义编辑器的文档在这里https://www.ag-grid.com/javascript-grid-cell-editor/

Answer 2

来自https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing的示例代码以支持Jquery UI Datepicker的方式编写在 React 项目中。

我有一个建议的解决方案，我已经尝试使用TextField Material UI和Material UI Native DatePicker 。 请检查下面的代码，它对我来说效果很好。

const getDatePicker = () => {
  function Datepicker() {}
  Datepicker.prototype.init = function(params) {
      const fillZeros = (a) => {
          return (Number(a) < 10) ? '0' + a : a;
      }
      const getFormatedDate = (dateString ) => {
          const dateParse = new Date(dateString.split('/')[1]+'-' + dateString.split('/')[0]+'-'+dateString.split('/')[2]);
          const dd = dateParse.getDate();
          const mm = dateParse.getMonth() + 1; //January is 0!
          const yyyy = dateParse.getFullYear();
          console.log(dateString, yyyy + '-' + fillZeros(mm) + '-' + fillZeros(dd));
          return yyyy + '-' + fillZeros(mm) + '-' + fillZeros(dd);
      }
      this.textInput = React.createRef();
      const eInput = React.createElement(TextField, {
          type: "date",
          defaultValue: getFormatedDate(params.value),
          ref: this.textInput
      });
      this.div = document.createElement('div');
      this.div.className = "ag-cell-parent-append";
      ReactDOM.render(eInput, this.div);
  };
  Datepicker.prototype.getGui = function() {
      return this.div;
  };
  Datepicker.prototype.afterGuiAttached = function() {
      this.textInput.current.focus();
  };
  Datepicker.prototype.getValue = function() {
      return this.textInput.current.querySelector('input').value;
  };
  Datepicker.prototype.destroy = function() {};
  Datepicker.prototype.isPopup = function() {
      return false;
  };
  return Datepicker;
}

完整的工作示例在stackblitz中