Question

我在我的项目中使用ag-Grid。我需要一个带有日期选择器的可编辑单元格。作为参考，我提供了我为下拉列表实现的代码。任何人都可以帮我将这个元素转换为DatePicker吗？

var columndefs = [      
     { field: 'expires', headerName: 'Expiry Date', width: 150, editable: true, cellEditor: dropdownCellEditor, cellEditorParams: celleditorparams}
];

Answer 1

您可以定义列配置，如下所示，即我在其中添加AGGridDatePickerComponent的位置。如果要修改日期格式，则需要添加valueFormatter。

[{
    headerName: 'Expiry Date',
    field: 'expiryDate',
    width: 100,
    editable: true,
    resizable: true,
    valueFormatter: this.expiryDateFormatter,
    cellEditorFramework: AgGridDatePickerComponent
}]

AGGridDatePickerCompponent外观如下

import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular/main';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'date-editor-cell',
  template: `
    <ngb-datepicker (select)="onDateSelect($event)" style></ngb-datepicker>
  `
})
export class AgGridDatePickerComponent implements ICellEditorAngularComp {
  private params: any;

  public selectedDate: any;

  agInit(params: any): void {
    this.params = params;
  }

  getValue(): any {
    return this.selectedDate;
  }

  isPopup(): boolean {
    return true;
  }

  onDateSelect(date: NgbDate) {
    this.selectedDate = { date: { year: date.year, month: date.month + 1, day: '02' } };
    this.params.api.stopEditing();
  }
}

在我的用例中，我只需要月份和年份。我编写了如下的值格式化程序函数。

    expiryDateFormatter(params) {
       if (params.value) {
         return `${params.value.date.month - 1}/${params.value.date.year}`;
        }
     }

Answer 2

     var columndefs = [ {
          headerName: "Date",
          field: "date",
          editable: true,
          cellEditor: "datePicker"
  },
]
components: { datePicker: 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;
}

Answer 3

ag-grid的文档中有一个Datepicker单元格编辑示例：

Click here

使用ag-grid在可编辑单元格中实现DatePicker

3 个答案: