Question

我正在尝试使用与Ag-Grid React配合使用的日期选择器（任何日期选择器）。

我尝试过的事情：

当我复制示例单元格编辑器datepicker（使用jQuery UI datepicker）时，错误消息是未定义“ $”。当我将其更改为“ window。$”时，我看到一个日期字段所在的文本字段，但没有日期选择器。

我尝试将react-datepicker放入其自己的组件中，并在{component：{datepicker：'customDatePicker'}}中引用它，但这是行不通的。那里是否有一个特定于React的示例？

这应该可行，对吧？

Answer 1

为什么不尝试使用与ag-grid示例中使用的选择器相同的选择器（请参见here）。

他们这样做的方法是指定一个datepicker函数，然后将其作为组件提供给date字段列。

您的列定义：

{
     headerName: "Date",
     field: "date",
     editable: true,
     cellEditor: "datePicker"
}

在state中指定组件：

components: { datePicker: getDatePicker() }

和getDatePicker（）`函数：

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

我已经在Plunker中使用全行编辑模式创建了一个有效的示例，您可以找到here。

如何在全行编辑模式下使datepicker与ag-grid-react一起使用

1 个答案: