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

Posted 2023-05-07

【中文标题】使用 ag-grid 进行单元格编辑的自定义日期选择器

【英文标题】：Custom datepicker on cell edit with ag-grid

【发布时间】：2020-06-08 02:14:27

【问题描述】：

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

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？

【参考方案1】：

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

【讨论】：

请原谅我对反应的了解不多，但这就是我所做的功能 getDatePicker 是 ICellEditorComp 的实现，给出的示例使用 jquery datepicker，我需要使用我的自定义 DatePicker 组件，这就是我拥有的地方问题

哦，抱歉，但您必须使用文档中的 React 方法，这取决于 React 组件生命周期 'init()' 未使用 而是使用传递给您的组件的 React 道具，destroy() doesn't work too 更改到componentWillUnmount() 更多在这里ag-grid.com/react-hooks/#hooks-with-methods

【参考方案2】：

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

我有一个建议的解决方案，我已尝试使用 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