We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

custom date field in gantt chart with inline editing

In gantt chart Inline editing, how to add custom Date field that should be exactly same as default Startdate and Enddate with calender picker.

1 Reply

LA Lokesh Arjunan Syncfusion Team October 11, 2022 05:58 AM

Hi Mukarram Ali

Greetings from Syncfusion Support.

We have validated your query and you can able to add custom date field using editTemplate. We have attached code snippet and sample for your reference.

Code Snippet:

edit: {

          create: () => {

            this.elem = document.createElement('input');

            return this.elem;


          read: () => {

            return this.dropdownlistObj.value;


          destroy: () => {



          write: (args: Object) => {

            this.dropdownlistObj = new DatePicker({

              value: args.rowData.CustomColumn,





Sample: https://stackblitz.com/edit/angular-nd2qkt?file=app.component.ts,app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/managing-tasks/task-bar-editing/#cell-edit-template



Live Chat Icon For mobile
Up arrow icon