CODEWITHSUNDEEP
angularjsag-grid
Irshad Shaik
Irshad Shaik

Reputation: 77

Implement DatePicker in an editable cell using ag-grid

I'm using ag-Grid in my project. I need to get an editable cell with a datepicker. For reference, I have provided code that I implemented for drop-down. Can anyone help me to convert this element to DatePicker?

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

Upvotes: 1

Views: 27701

Answers (2)

hardikce
hardikce

Reputation: 41

You can define your column configuration like below, Where i added AGGridDatePickerComponent. if you want to modify the format of Date then you need to add valueFormatter.

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

AGGridDatePickerCompponent look like below

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

In my use case, I only need month and year. i write my value formatter function like below.

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

Upvotes: 4

Pavani Atchi
Pavani Atchi

Reputation: 9

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

Upvotes: 0

Related Questions