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

【问题标题】：Implement DatePicker in an editable cell using ag-grid使用 ag-grid 在可编辑单元格中实现 DatePicker
【发布时间】：2017-06-17 09:09:39
【问题描述】：

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

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

【问题讨论】：

你打算使用什么类型的日期选择器？ jquery、angularMaterial、bootstrap？
这是一个引导日期选择器
文档中有一个示例 (ag-grid.com/javascript-grid-cell-editing)。搜索“日期选择器单元格编辑示例”
谢谢！这很有帮助

标签： angularjs ag-grid

【解决方案1】：

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

Click here

【讨论】：

不要发布仅链接的答案。这些都不好。如果远程资源消失（暂时或永久消失），那么您的答案完全没用。您可以保留该链接，但您应该在答案正文中直接包含解决 OP 问题的重要信息。
这是另一个 DatePicker，来自 jQuery-UI，但问题是关于 Angular DatePicker

【解决方案2】：

您可以定义列配置，如下所示，我在其中添加了AGGridDatePickerComponent。如果要修改Date的格式则需要添加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}`;
        }
     }

【讨论】：

您能分享一下工作示例吗？还是 stackblitz 链接？

【解决方案3】：

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

【讨论】：

点评来源：您能描述一下您的解决方案吗？请不要发布原始源代码作为答案。