Как заставить DatePicker работать с ag-grid-реагировать в режиме редактирования полной строки

Question

Я пытаюсь заставить DatePicker (любой DatePicker) работать с Ag-Grid React.

Вещи, которые я пробовал:

Когда я копирую образец редактора ячеек даты (используя jQuery UI datepicker), сообщение об ошибке «$» не определено. Когда я изменяю это на «window. $», Я вижу текстовое поле, в котором находится столбец даты, но нет указателя даты.

Я пытался поместить response-datepicker в его собственный компонент и ссылаться на него в {component: {datepicker: 'customDatePicker'}}, но это не работает. Есть ли где-нибудь специфичный для React пример?

Это должно быть возможно, верно?

Answer 1

Почему бы вам не попробовать использовать тот же сборщик, который использовался ag-grid в их примере (см. здесь ).

Чтобы сделать это, нужно указать функцию выбора даты.который затем предоставляется столбцу поля даты в качестве компонента.

Ваш столбец def:

{
     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, который вы можете найти здесь .